這篇文章主要為大家展示了“微信小程序中如何實現(xiàn)左右滑動切換頁面功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“微信小程序中如何實現(xiàn)左右滑動切換頁面功能”這篇文章吧。

創(chuàng)新互聯(lián)建站服務項目包括樂平網(wǎng)站建設、樂平網(wǎng)站制作、樂平網(wǎng)頁制作以及樂平網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，樂平網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到樂平省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

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

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

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

 // do something

第二步：在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; // 回復滑動事件
},

以上是“微信小程序中如何實現(xiàn)左右滑動切換頁面功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁題目：微信小程序中如何實現(xiàn)左右滑動切換頁面功能-創(chuàng)新互聯(lián)
標題鏈接：http://weahome.cn/article/dceicc.html