小程序模板網(wǎng)

微信小程序 監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面

發(fā)布時(shí)間:2017-12-19 10:22 所屬欄目:小程序開(kāi)發(fā)教程

1.對(duì)應(yīng)的xml里寫上手勢(shì)開(kāi)始、滑動(dòng)、結(jié)束的監(jiān)聽(tīng):view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" /view2.js: view plain copyvar touchDot = 0;//觸摸時(shí)的原點(diǎn) ...

 
 
 

1.對(duì)應(yīng)的xml里寫上手勢(shì)開(kāi)始、滑動(dòng)、結(jié)束的監(jiān)聽(tīng):

 

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

2.js:

 

		
  1. [javascript] view plain copy
  2. var touchDot = 0;//觸摸時(shí)的原點(diǎn)
  3. var time = 0;// 時(shí)間記錄,用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng)
  4. var interval = "";// 記錄/清理時(shí)間記錄
  5. Page({
  6. data: {...}
  7. })
 

		
  1. Page({
  2. data: {
  3. ...
  4. },
  5. // 觸摸開(kāi)始事件
  6. touchStart: function (e) {
  7. touchDot = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)
  8. // 使用js計(jì)時(shí)器記錄時(shí)間
  9. interval = setInterval(function () {
  10. time++;
  11. }, 100);
  12. },
  13. // 觸摸移動(dòng)事件
  14. touchMove: function (e) {
  15. var touchMove = e.touches[0].pageX;
  16. console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
  17. // 向左滑動(dòng)
  18. if (touchMove - touchDot <= -40 && time < 10) {
  19. wx.switchTab({
  20. url: '../左滑頁(yè)面/左滑頁(yè)面'
  21. });
  22. }
  23. // 向右滑動(dòng)
  24. if (touchMove - touchDot >= 40 && time < 10) {
  25. console.log('向右滑動(dòng)');
  26. wx.switchTab({
  27. url: '../右滑頁(yè)面/右滑頁(yè)面'
  28. });
  29. }
  30. },
  31. // 觸摸結(jié)束事件
  32. touchEnd: function (e) {
  33. clearInterval(interval); // 清除setInterval
  34. time = 0;
  35. },
  36. .
  37. .
  38. .
  39. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/18200.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×