微信小程序 監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面
發(fā)布時(shí)間：2017-12-19 10:22 所屬欄目：小程序開(kāi)發(fā)教程
1.對(duì)應(yīng)的xml里寫(xiě)上手勢(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里寫(xiě)上手勢(shì)開(kāi)始、滑動(dòng)、結(jié)束的監(jiān)聽(tīng)：
-
<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
2.js:
-
[javascript] view plain copy -
var touchDot = 0;//觸摸時(shí)的原點(diǎn) -
var time = 0;// 時(shí)間記錄，用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng) -
var interval = "";// 記錄/清理時(shí)間記錄 -
Page({ -
data: {...} -
})
-
Page({ -
data: { -
... -
}, -
// 觸摸開(kāi)始事件 -
touchStart: function (e) { -
touchDot = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn) -
// 使用js計(jì)時(shí)器記錄時(shí)間 -
interval = setInterval(function () { -
time++; -
}, 100); -
}, -
// 觸摸移動(dòng)事件 -
touchMove: function (e) { -
var touchMove = e.touches[0].pageX; -
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot)); -
// 向左滑動(dòng) -
if (touchMove - touchDot <= -40 && time < 10) { -
wx.switchTab({ -
url: '../左滑頁(yè)面/左滑頁(yè)面' -
}); -
} -
// 向右滑動(dòng) -
if (touchMove - touchDot >= 40 && time < 10) { -
console.log('向右滑動(dòng)'); -
wx.switchTab({ -
url: '../右滑頁(yè)面/右滑頁(yè)面' -
}); -
} -
}, -
// 觸摸結(jié)束事件 -
touchEnd: function (e) { -
clearInterval(interval); // 清除setInterval -
time = 0; -
}, -
. -
. -
. -
})
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/18200.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
