微信小程序監(jiān)聽手勢滑動切換頁面實例詳解

更新時間：2017年06月15日 15:23:35 投稿：lqh

這篇文章主要介紹了微信小程序監(jiān)聽手勢滑動切換頁面實例詳解的相關資料,需要的朋友可以參考下

微信小程序監(jiān)聽手勢滑動切換頁面實例詳解

1.對應的xml里寫上手勢開始、滑動、結(jié)束的監(jiān)聽：

<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>

2.js:

var touchDot = 0;//觸摸時的原點 
var time = 0;// 時間記錄，用于滑動時且時間小于1s則執(zhí)行左右滑動 
var interval = "";// 記錄/清理時間記錄 
Page({ 
 data: {...} 
   })

Page({ 
 data: { 
     ... 
 }, 
 // 觸摸開始事件 
 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) { 
   wx.switchTab({ 
    url: '../左滑頁面/左滑頁面' 
   });  
  } 
  // 向右滑動 
  if (touchMove - touchDot >= 40 && time < 10) { 
   console.log('向右滑動'); 
   wx.switchTab({ 
    url: '../右滑頁面/右滑頁面' 
   });  
  } 
 }, 
 // 觸摸結(jié)束事件 
 touchEnd: function (e) { 
  clearInterval(interval); // 清除setInterval 
  time = 0; 
 }, 
. 
. 
. 
})

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

您可能感興趣的文章:

微信小程序--組件（swiper）詳細介紹
這篇文章主要介紹了微信小程序--組件（swiper）詳細介紹的相關資料,需要的朋友可以參考下
2017-06-06
Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析
這篇文章主要為大家介紹了Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
微信小程序圖片邊框解決方法
這篇文章主要介紹了微信小程序圖片邊框解決方法的相關資料,需要的朋友可以參考下
2017-01-01
前端JavaScript徹底弄懂函數(shù)柯里化curry
隨著主流JavaScript中函數(shù)式編程的迅速發(fā)展，函數(shù)柯里化在許多應用程序中已經(jīng)變得很普遍。了解它們是什么，它們?nèi)绾喂ぷ饕约叭绾纬浞掷盟鼈兎浅Ｖ匾?。本篇文章小編九向大家詳細介紹JavaScript函數(shù)柯里化，需要的小伙伴可以參考下面文字內(nèi)容
2021-09-09
使用MUI框架模擬手機端的下拉刷新和上拉加載功能
mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)。本文重點給大家介紹使用MUI框架模擬手機端的下拉刷新和上拉加載功能，感興趣的朋友參考下吧
2017-09-09
微信小程序獲取javascript 里的數(shù)據(jù)
這篇文章主要介紹了微信小程序獲取javascript 里的數(shù)據(jù)的相關資料,這里通過實例來說明如何獲取javascript里的數(shù)據(jù)，希望能幫助到大家，需要的朋友可以參考下
2017-08-08
3分鐘精通高階前端隨手寫TS插件
這篇文章主要為大家介紹了3分鐘精通高階前端隨手寫TS插件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
微信小程序支付功能（前端）的實現(xiàn)
這篇文章主要介紹了微信小程序支付功能（前端）的實現(xiàn)的相關資料,需要的朋友可以參考下
2017-05-05
微信小程序 UI布局常用技巧整理總結(jié)
這篇文章主要介紹了微信小程序 UI布局常用技巧整理總結(jié)的相關資料,現(xiàn)在不論是APP 還是各種軟件，UI布局還是非常重要的，用戶體驗第一位啊，這里就整理下微信小程序的UI布局，需要的朋友可以參考下
2016-12-12
webpack安裝配置及使用教程詳解
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06