vue结合swiper实现仿淘宝菜单栏左右滑动

根据产品需求,需要仿照淘宝海淘菜单栏实现左右滑动切换数据的效果(手机版的) 主要思路: 1.使用vue.js实现双向数据绑定实现实时刷新数据,数据是来源于本地的json文件 2.swiper实现菜单栏左右滑动效果 关键核心代码

var mySwiper1 = new Swiper('.model-orders-nav-wrapper', { slidesPerView: "auto", /*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/ freeMode: false, /*自动贴合*/ freeModeSticky: true, /*自动贴合。*/ centeredSlides: true, /*设定为true时,活动块会居中,而不是默认状态下的居。*/ slideToClickedSlide: true, /*设置为true则swiping时点击slide会过渡到这个slide。*/ onInit: function (swiper) { /*回调函数,初始化后执行。*/ }, onSlideChangeStart: function (swiper) { }, onSlideChangeEnd: function (swiper) { //获取active的索引值 var activeIndex=mySwiper1.activeIndex; vue1.modelDataActive=vue1.modelData[activeIndex]; } }); 效果图:

戳我进入展示页面 扫我看看

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。