小程序自帶swiper組件，

display-multiple-items 同時顯示的滑塊數(shù)量
current： 當前所在滑塊的 index
duration：切換需要花的時間 一般為1秒
bindchange：current發(fā)生改變觸發(fā)
bindanimationfinish：動畫結(jié)束時觸發(fā)
circular 是否采用銜接滑動

<view class="swiperCont"><view class="activeBtn1" bindtap="toLeft"></view><view class="activeBtn2" bindtap="toRight"></view><swiper current="{{currentIndex}}" circular="true" duration="1000" bindchange="changeIndex" bindanimationfinish="changeFinish" display-multiple-items="4"><swiper-item wx:for="{{[1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}}" wx:key="index" bindtap="openPop" data-type="choose" data-ind="index"><view class="swiper_cont"><image src="../../ossweb-img/icon_treasureBox.png" mode="scaleToFill" class="slide-image" /></view><text>道具名xxxxx道具名xxxxx{{index}}</text></swiper-item></swiper></view> // index.js Page({data: {currentIndex: 0, // 頁面swiper的current索引index: 0,flag: true,},onLoad(options) {},onShow() {},onHide() {},toLeft: function (e) {console.log(this.data.flag)if (!this.data.flag) { // 動畫未完成不執(zhí)行return} else {// 修改按鈕切換不可用狀態(tài)this.setData({flag: false})let index = this.data.indexif (index > 0) {this.setData({currentIndex: index - 1})} else {this.setData({currentIndex: 0})}}},toRight: function (e) {console.log(this.data.flag)if (!this.data.flag) { // 動畫未完成不執(zhí)行return} else {// 修改按鈕切換不可用狀態(tài)this.setData({flag: false})let index = this.data.indexif (index >= 16) {this.setData({currentIndex: 0})} else {this.setData({currentIndex: index + 1})}}},changeIndex: function (e) { // 切換過程綁定console.log("e.detail.current",e.detail.current);this.setData({index: e.detail.current,currentIndex: e.detail.current})},changeFinish: function (e) { // 動畫完成// 修改按鈕切換可用狀態(tài)this.setData({flag: true})}, .swiperCont {width: 650rpx;height: 180rpx;margin: 10rpx auto 0;position: relative; }.activeBtn1 {width: 40rpx;height: 66rpx;box-sizing: border-box;background: url("/ossweb-img/btn_active.png") no-repeat;background-size: 100% 100%;position: absolute;top: 20%;left: -40rpx; }.activeBtn2 {width: 40rpx;height: 66rpx;box-sizing: border-box;background: url("/ossweb-img/btn_active.png") no-repeat;background-size: 100% 100%;transform: rotate(180deg);position: absolute;top: 20%;right: -40rpx; }.swiperCont swiper {height: 180rpx; }.swiperCont swiper-item {display: flex;flex-direction: column;justify-content: flex-start;align-items: center; }swiper-item .swiper_cont {width: 134rpx;height: 134rpx;box-sizing: border-box;background: url("/ossweb-img/propsBG.png") no-repeat;background-size: 100% 100%;display: flex;justify-content: center;align-items: center; }swiper-item .swiper_cont .slide-image {width: 90rpx;height: 90rpx; }swiper-item text {width: 134rpx;font-size: 20rpx;color: #122334;text-align: center; }

總結(jié)

以上是生活随笔為你收集整理的小程序swiper带切换按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。