|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 監聽手勢滑動切換頁面實例詳解的相關資料,需要的朋友可以參考下微信小程序 監聽手勢滑動切換頁面實例詳解 1.對應的xml里寫上手勢開始、滑動、結束的監聽: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//觸摸時的原點
var time = 0;// 時間記錄,用于滑動時且時間小于1s則執行左右滑動
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;
},
.
.
.
})以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 微信小程序
scroll-view實現上拉加載與下拉刷新的實例 以上就是微信小程序 監聽手勢滑動切換頁面的實現的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!