swiper组件轮播方向问题
现象描述:当轮播设置了autoplay="true",并自动轮播时,自定义按钮“上一页”,“下一页”在点击时,不是按照一个方向轮播,此问题只出想在只有2张图的情况下,大于等于3张时正常。现象如下面动图。
代码:
wxml:
<view class="intro">当只有2张图的轮播</view>
<view class="dbox">
<swiper class="swiper_box" style="height:1000rpx;" indicator-dots="true" current="{{current}}" autoplay="true" circular="true">
<block wx:for="{{list}}" wx:key="index">
<swiper-item item-id="{{index}}">
<image class="swiper_item_img" id="{{index}}" src="{{item.urlPath}}" bindload="imgLoadCarousel" lazy-load="true" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
<!-- 按钮:下一页 -->
<view class="btn_next" bindtap="nextImg" style="top:460rpx;">
<image class="icon_next" src="../images/hotZone_btn.png" mode="widthFix">
</image>
</view>
<!-- 按钮:上一页 -->
<view class="btn_prew" bindtap="prevImg" style="top:460rpx;">
<image class="icon_prew" src="../images/hotZone_btn.png" mode="widthFix">
</image>
</view>
</view>
js:
const app = getApp()
Page({
data: {
//swiper循环数据
list: [{
name: "有翡",
urlPath: "
https://inews.gtimg.com/newsapp_bt/0/12888685886/1000.jpg"
}, {
name: "出轨你就死定了",
urlPath: "https://tu.66vod.net/2020/5272.jpg"
}],
current: 0, //当前所在滑块的 index
},
onLoad() {
},
// 上一页
prevImg: function () {
let that = this;
let current = that.data.current;
let len = that.data.list.length;
current--;
if (current == -1) current = len - 1;
that.setData({
current: current
})
},
// 下一页
nextImg: function () {
let that = this;
let current = that.data.current;
let len = that.data.list.length;
current++;
if (current == len) current = 0;
that.setData({
current: current
})
},
})
wxss:
.intro {
margin: 30px;
text-align: center;
}
.dbox {
width: 100%;
height: 100%;
position: relative;
}
swiper {
border-top: 0;
}
.swiper_box {
background-color: #fff;
height: 900rpx;
background: #fff;
}
.swiper_item_img {
width: 100%;
height: 800rpx;
}
.btn_next {
width: 80rpx;
height: 80rpx;
position: absolute;
right: 0rpx;
background-color: rgba(255, 255, 255, 0.5);
}
.btn_prew {
width: 80rpx;
height: 80rpx;
position: absolute;
left: 0rpx;
background-color: rgba(255, 255, 255, 0.5);
}
.icon_next {
margin: 24rpx;
width: 32rpx;
height: 32rpx;
transform: rotate(180deg);
}
.icon_prew {
margin: 24rpx;
width: 32rpx;
height: 32rpx;
}
提供这种格式的代码片段看下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
试试动态设置autoplay属性,当开始触摸或者点击的 时候设置false,触摸结束再开始为true