欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年06月15日 15:23:35   投稿：lqh  
這篇文章主要介紹了微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解的相關資料,需要的朋友可以參考下

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

1.對應的xml里寫上手勢開始、滑動、結束的監(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: '../右滑頁面/右滑頁面' 
   });  
  } 
 }, 
 // 觸摸結束事件 
 touchEnd: function (e) { 
  clearInterval(interval); // 清除setInterval 
  time = 0; 
 }, 
. 
. 
. 
})

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

相關文章

最新評論