提供zblog模板_zblog主题_wordpress模板的下载和定制

swiper做导航栏时自动跳转至对应分类的代码

天兴工作室 2020-12-07 网页特效 235 0 评论


给客户做一个zblog模板,手机端需要实现一个滑动导航栏的需求。分为上下两部分,一级分类显示在上面当导航栏,下面则显示该分类的子分类,左右滑动可切换。

于是准备直接用swiper实现,直接new了两个Swiper对象,然后绑定切换,这个效果Swiper官网有案例的。

然后出现了一个问题,当打开列表页的时候导航栏需要切换到当前分类并高亮显示,底部也要切换到对应的子分类模块显示。

尝试了一些方法后用“slideTo”这个方法解决了,分享下思路过程和代码。

首先了解下“slideTo”这个方法的参数,官方文档说明:https://www.swiper.com.cn/api/methods/109.html

思路大概就是循环导航栏swiper,对比哪一个跟当前页面的链接是相同的,然后获取它的“data-swiper-slide-index”值;

然后用“slideTo”方法,把上面获取到值赋给子分类模块的swiper,即可实现需求。

代码:

导航栏swiper的class为“gallery-thumbs”,子分类模块swiper的class为“galleryTop”。js代码如下:

var surl = location.href;
$(".gallery-thumbs .swiper-slide a").each(function() {
    if ($(this).attr("href") == surl) {
        var liebs = $(this).parent().attr("data-swiper-slide-index");
        var liebss = liebs - 1;
        galleryTop.slideTo(liebss,0, false);
    }
});

最后总结下,swiper确实很强大。


没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合

社交账号登录

将本文分享给你的朋友们