vue结合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、网站不提供资料下载,如需下载请到原作者页面进行下载。