Loading
0

在给zblog模板的swiper做导航栏时怎么自动跳转至对应分类代码教程

公众号搜索菜鸟站长之家

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

于是准备直接用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);
    }
});

 

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。