微信小程序使用轮播组件swiper,添加左右滑动按钮

wxml 

<view>
	<block wx:if="{
   
   {list.length>1}}">
		<van-icon bindtap="nextSwiper" name="arrow" class="icon-right" color="#c09d75"/>
		<van-icon bindtap="prevSwiper" name="arrow-left" class="icon-left" color="#c09d75"/>
	</block>
	<swiper class="swiper" id="swiper" circular="{
   
   {true}}" current="{
   
   {swiper.current}}" interval="3000" duration="500">
	    <swiper-item wx:for="{
   
   {list}}" wx:key="index">{
   
   {item}}</swiper-item>
	</swiper>
</view>

js

Page({
	/**
	 * 页面的初始数据
	 */
	data: {
        list: [],
        swiper: {},	
    },
    // 上一页
    prevSwiper() {
	    let swiper = this.data.swiper;
	    let current = swiper.current;
	    swiper.current = current > 0 ? current - 1 : this.data.list.length - 1;
	    this.setData({
		    swiper
	    })
    },
    // 下一页
    nextSwiper() {
	    var swiper = this.data.swiper;
	    var current = swiper.current;
	    swiper.current = current < ( this.data.list.length - 1) ? current + 1 : 0;
	    this.setData({
		    swiper
	    })
    },
    onLoad(){
        const that = this;
        let query = wx.createSelectorQuery();
        var swiper = that.data.swiper;
        query.select('#swiper').boundingClientRect(function(rect) {
	        swiper.current = 0
	        that.setData({
		           swiper
	        })
        }).exec();
    }
})

猜你喜欢

转载自blog.csdn.net/qq_29483485/article/details/128800248
今日推荐