微信小程序之swiper限制循环滑动

最近接的一个单子是使用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;
      }
      //下面是上拉事件的相关代码，这里就不添出来了。
}