微信小程序左右滑動切換頁面詳解及實例代碼

更新時間：2017年02月28日 16:42:33 作者：呂周坤

這篇文章主要介紹了微信小程序左右滑動切換頁面詳解及實例代碼的相關資料,需要的朋友可以參考下

微信小程序——左右滑動切換頁面事件

微信小程序的左右滑動觸屏事件，主要有三個事件：touchstart，touchmove，touchend。

這三個事件最重要的屬性是pageX和pageY，表示X，Y坐標。

touchstart在觸摸開始時觸發(fā)事件;
touchend在觸摸結束時觸發(fā)事件;
touchmove觸摸的過程中不斷激發(fā)這個事件;

這三個事件都有一個timeStamp的屬性，查看timeStamp屬性，可以看到順序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

第一步：在wxml文件中綁定事件(需要左右滑動的界面)

<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
 // do something
</view>

第二步：在js文件中處理左右滑動邏輯

var touchDot = 0;//觸摸時的原點
var time = 0;// 時間記錄，用于滑動時且時間小于1s則執(zhí)行左右滑動
var interval = "";// 記錄/清理 時間記錄
var nth = 0;// 設置活動菜單的index
var nthMax = 5;//活動菜單的最大個數(shù)
var tmpFlag = true;// 判斷左右華東超出菜單最大值時不再執(zhí)行滑動事件

// 觸摸開始事件
touchStart:function(e){ 
  touchDot = e.touches[0].pageX; // 獲取觸摸時的原點
  // 使用js計時器記錄時間  
  interval = setInterval(function(){
    time++;
  },100); 
},
// 觸摸移動事件
touchMove:function(e){ 
  var touchMove = e.touches[0].pageX;
  console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
  // 向左滑動  
  if(touchMove - touchDot <= -40 && time < 10){
    if(tmpFlag && nth < nthMax){ //每次移動中且滑動時不超過最大值 只執(zhí)行一次
      var tmp = this.data.menu.map(function (arr, index) {
        tmpFlag = false;
        if(arr.active){ // 當前的狀態(tài)更改
          nth = index;
          ++nth;
          arr.active = nth > nthMax ? true : false;
        }
        if(nth == index){ // 下一個的狀態(tài)更改
          arr.active = true;
          name = arr.value;
        }
        return arr;
      })
      this.getNews(name); // 獲取新聞列表
      this.setData({menu : tmp}); // 更新菜單
    }
  }
  // 向右滑動
  if(touchMove - touchDot >= 40 && time < 10){
    if(tmpFlag && nth > 0){
      nth = --nth < 0 ? 0 : nth;
      var tmp = this.data.menu.map(function (arr, index) {
        tmpFlag = false;
        arr.active = false;
        // 上一個的狀態(tài)更改
        if(nth == index){
          arr.active = true;
          name = arr.value;
        }
        return arr;
      })
      this.getNews(name); // 獲取新聞列表
      this.setData({menu : tmp}); // 更新菜單
    }
  }
  // touchDot = touchMove; //每移動一次把上一次的點作為原點（好像沒啥用）
},
 // 觸摸結束事件
touchEnd:function(e){
  clearInterval(interval); // 清除setInterval
  time = 0;
  tmpFlag = true; // 回復滑動事件
},

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: