這篇文章主要介紹了微信小程序左右滑動切換頁面的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前創新互聯已為超過千家的企業提供了網站建設、域名、虛擬空間、網站托管維護、企業網站設計、修水網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

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

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

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

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

這三個事件都有一個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則執行左右滑動
var interval = "";// 記錄/清理 時間記錄
var nth = 0;// 設置活動菜單的index
var nthMax = 5;//活動菜單的最大個數
var tmpFlag = true;// 判斷左右華東超出菜單最大值時不再執行滑動事件

// 觸摸開始事件
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){ //每次移動中且滑動時不超過最大值 只執行一次
      var tmp = this.data.menu.map(function (arr, index) {
        tmpFlag = false;
        if(arr.active){ // 當前的狀態更改
          nth = index;
          ++nth;
          arr.active = nth > nthMax ? true : false;
        }
        if(nth == index){ // 下一個的狀態更改
          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;
        // 上一個的狀態更改
        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; // 回復滑動事件
},

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序左右滑動切換頁面的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

網頁標題：微信小程序左右滑動切換頁面的示例分析
本文來源：http://m.newbst.com/article44/ispihe.html

成都網站建設公司_創新互聯，為您提供標簽優化、外貿網站建設、用戶體驗、ChatGPT、營銷型網站建設、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯