微信小程序中的swiper用法

NO IMAGE

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

相關文章

js中的事件委託(事件代理)

js繼承的幾種方式

vue的一些知識點

微信小程序的知識點