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 }) },