微信小程序 監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面實(shí)例詳解
微信小程序 監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面實(shí)例詳解
1.對(duì)應(yīng)的xml里寫上手勢(shì)開(kāi)始、滑動(dòng)、結(jié)束的監(jiān)聽(tīng):
<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
2.js:
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; }, . . . })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序 兩種滑動(dòng)方式(橫向滑動(dòng),豎向滑動(dòng))詳細(xì)及實(shí)例代碼
- 微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
- 微信小程序圖片橫向左右滑動(dòng)案例
- 微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼
- 微信小程序側(cè)邊欄滑動(dòng)特效(左右滑動(dòng))
- 微信小程序 頁(yè)面滑動(dòng)事件的實(shí)例詳解
- 微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼
- 微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
- 微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能的實(shí)例代碼
- 小程序?qū)崿F(xiàn)滑動(dòng)塊效果
相關(guān)文章
gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐
這篇文章主要為大家介紹了gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序getPhoneNumber獲取用戶手機(jī)號(hào)
這篇文章主要介紹了 微信小程序getPhoneNumber獲取用戶手機(jī)號(hào)的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析
這篇文章主要介紹了axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07詳解JavaScript中數(shù)組的相關(guān)知識(shí)
這篇文章主要介紹了JavaScript中中數(shù)組的相關(guān)知識(shí),是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07JavaScript 中for/of,for/in 的詳細(xì)介紹
這篇文章主要介紹了JavaScript 中的for/of, for/in,在 JavaScript中,for 循環(huán)有幾種常見(jiàn)的寫法,西阿棉文章有寫法的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11javascript Number 與 Math對(duì)象的介紹
這篇文章主要介紹了javascript Number 與 Math對(duì)象,文章圍繞 Number 與 Math對(duì)象的相關(guān)資料展開(kāi)內(nèi)容,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-11-11