最近接的一個單子是使用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;
      }
      //下面是上拉事件的相關程式碼，這裡就不添出來了。
}