!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>网站运维>在给zblog模板的swiper做导航栏时怎么自动跳转至对应分类代码教程

在给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代码如下:

给TA打赏
共{{data.count}}人
人已打赏
网站运维

关于zblogphp1.6程序报错提示“非法访问”的原因加解决办法教程

2022-10-22 13:24:48

网站运维

WordPress如何修改后台登录地址,来提高安全性教程(wordpress修改登录界面)

2022-10-22 13:25:25

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索