這篇“微信小程序中怎么實現(xiàn)左右滑動切換頁面功能”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序中怎么實現(xiàn)左右滑動切換頁面功能”文章吧。

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、南華網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

touchstart在觸摸開始時觸發(fā)事件;
touchend在觸摸結(jié)束時觸發(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;// 設(shè)置活動菜單的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; //每移動一次把上一次的點作為原點（好像沒啥用）
},
 // 觸摸結(jié)束事件
touchEnd:function(e){
  clearInterval(interval); // 清除setInterval
  time = 0;
  tmpFlag = true; // 回復(fù)滑動事件
},

以上就是關(guān)于“微信小程序中怎么實現(xiàn)左右滑動切換頁面功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：微信小程序中怎么實現(xiàn)左右滑動切換頁面功能
文章出自：http://chinadenli.net/article4/jhpeoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、手機網(wǎng)站建設(shè)、Google、微信小程序、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣

廣告

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