微信小程序?qū)崿F(xiàn)手勢滑動效果
更新時間:2019年08月26日 09:30:57 作者:Vam的金豆之路
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)手勢滑動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)手勢滑動的具體代碼,供大家參考,具體內(nèi)容如下
wxml:
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > </view>
index.js:
var touchStartX = 0;//觸摸時的原點
var touchStartY = 0;//觸摸時的原點
var time = 0;// 時間記錄,用于滑動時且時間小于1s則執(zhí)行左右滑動
var interval = "";// 記錄/清理時間記錄
var touchMoveX = 0; // x軸方向移動的距離
var touchMoveY = 0; // y軸方向移動的距離
Page({
// 觸摸開始事件
touchStart: function (e) {
touchStartX = e.touches[0].pageX; // 獲取觸摸時的原點
touchStartY = e.touches[0].pageY; // 獲取觸摸時的原點
// 使用js計時器記錄時間
interval = setInterval(function () {
time++;
}, 100);
},
// 觸摸移動事件
touchMove: function (e) {
touchMoveX = e.touches[0].pageX;
touchMoveY = e.touches[0].pageY;
},
// 觸摸結(jié)束事件
touchEnd: function (e) {
var moveX = touchMoveX - touchStartX
var moveY = touchMoveY - touchStartY
if (Math.sign(moveX) == -1) {
moveX = moveX * -1
}
if (Math.sign(moveY) == -1) {
moveY = moveY * -1
}
if (moveX <= moveY) {// 上下
// 向上滑動
if (touchMoveY - touchStartY <= -30 && time < 10) {
console.log("向上滑動")
}
// 向下滑動
if (touchMoveY - touchStartY >= 30 && time < 10) {
console.log('向下滑動 ');
}
}else {// 左右
// 向左滑動
if (touchMoveX - touchStartX <= -30 && time < 10) {
console.log("左滑頁面")
}
// 向右滑動
if (touchMoveX - touchStartX >= 30 && time < 10) {
console.log('向右滑動');
}
}
clearInterval(interval); // 清除setInterval
time = 0;
},
})
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
bootstrapValidator 重新啟用提交按鈕的方法
bootstrapValidator 使用中,由于字段檢查等原因,致使提交按鈕失效。如何重新啟用提交按鈕呢?下面小編給大家介紹下bootstrapValidator 重新啟用提交按鈕的方法,需要的朋友可以參考下2017-02-02
Bootstrap3 內(nèi)聯(lián)單選和多選框
這篇文章主要介紹了Bootstrap3 內(nèi)聯(lián)單選和多選框的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12
JavaScript打印網(wǎng)頁指定區(qū)域的例子
這篇文章主要介紹了JavaScript打印網(wǎng)頁指定區(qū)域的例子,需要的朋友可以參考下2014-05-05

