i-nodejs/swiper-leftright-slide

##根据产品需求，需要仿照淘宝海淘菜单栏实现左右滑动切换数据的效果（手机版的） ###主要思路： ####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];


              }

          });

###效果图： ###戳我进入展示页面 ###扫我看看

i-nodejs / swiper-leftright-slide

About

Languages