微信小程序中的swiper用法

1,643 阅读1分钟

wxml:

 <swiper indicator-dots="{{swiper.indicatorDots}}"    autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" circular="{{swiper.circular}}" current="{{swiper.swiperCurrent}}" bindchange="swiperChange" class="swiper">       <block wx:for="{{swiper.swiperItems}}" wx:key="{{item.id}}">           <swiper-item>                                <image src="{{item.echartImgSrc}}" class="echart-img"></image>            </swiper-item>        </block>   </swiper>
   <view hidden="{{prevHide}}" class="pageBtn pagePrev" bindtap="changePrev">          <image src="../../images/page-prev.png"></image>    </view>    <view hidden="{{nextHide}}" class="pageBtn pageNext" bindtap="changeNext">           <image src="../../images/page-next.png"></image>     </view>

js:需要自定义轮播的上下页方法

data:{
   swiper:{      //轮播图      swiperItems: [      ],      swiperCurrent: 0, //当前swiper的index      indicatorDots: false, //是否显示面板指示点      autoplay: true, //是否自动切换      interval: 1000, //自动切换时间间隔      duration: 1000, //滑动动画时长      circular: false    },
},
 //轮播图上一页  changePrev: function(){    var that = this;    var swiper = that.data.swiper;    var current = swiper.swiperCurrent;    swiper.swiperCurrent = current > 0 ? current - 1 : 0;    swiper.duration = 1000; //滑动动画时长        that.setData({      swiper: swiper    })  },  //轮播图下一页  changeNext: function () {    var that = this;    var swiper = that.data.swiper;    var current = swiper.swiperCurrent;    var current = swiper.swiperCurrent;    swiper.swiperCurrent = current < (swiper.swiperItems.length - 1) ? current + 1 : (swiper.swiperItems.length - 1);    swiper.duration = 1000; //滑动动画时长    that.setData({      swiper: swiper    })  },