最近接的一个单子是使用swiper来达到页面之间完美滑动的效果的。也就三个页面首页、内容页、尾页。
但是客户要求首页不能滑到尾页,尾页不能滑到首页。
在官方文档中没有找到方法,因此只能绕弯路了。
wxml页面代码:重点在于 current='{{show_index}}'
<swiper class='swiper' circular='true' vertical='true' bindtouchstart='touchStart' bindtouchend='touchEnd' animation="{{animationData}}" current='{{show_index}}'>
js页面代码:
data: {
animationData: {},
show_index: 0,
list_length: 1,
lastY: 0,
list:[],
}
let index = _this.data.show_index;
let length = _this.data.list_length; //内容页的长度
接下来是在touchEnd的函数中:
if (endY > locationY) { //下拉,回到前一页
if(index == 0){ //禁止从内容第一页回到首页
_this.setData({
show_index: index
})
return;
}
//下面是下拉事件的相关代码,这里就不添出来了。
}
else { //上拉,前往下一页
if (index == (length+1)){ //禁止从尾页 前往 首页
_this.setData({
show_index: index
})
return;
}
//下面是上拉事件的相关代码,这里就不添出来了。
}