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

公司主營業(yè)務：成都網(wǎng)站設計、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出唐山免費做網(wǎng)站回饋大家。

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

微信小程序的左右滑動觸屏事件，主要有三個事件：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; // 回復滑動事件
},

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

分享標題：微信小程序左右滑動切換頁面的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.chinadenli.net/article46/dijehg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、小程序開發(fā)、品牌網(wǎng)站制作、網(wǎng)站改版

廣告

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