微信小程序?qū)崿F(xiàn)手勢滑動效果
更新時間:2019年08月26日 09:30:57 作者:Vam的金豆之路
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢滑動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
HTML+CSS+JavaScript實現(xiàn)簡單日歷效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08詳解JavaScript正則表達(dá)式之分組匹配及反向引用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式之分組匹配及反向引用 的相關(guān)資料,需要的朋友可以參考下2016-03-03javascript實現(xiàn)的基于金山詞霸網(wǎng)絡(luò)翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡(luò)翻譯提供的接口,遠(yuǎn)程調(diào)用文件,可以作為一個自定義的在線查詢工具。2010-01-01JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
今天在打算從js端時序數(shù)據(jù)庫TSDB中,按相同的類型的數(shù)據(jù)排在一起,并且取同一時間段最新的數(shù)據(jù),經(jīng)過查詢這種思想叫做數(shù)據(jù)聚合,就是返回的數(shù)據(jù)要根據(jù)一個屬性來做計算,這篇文章主要介紹了JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)?groupBy函數(shù),需要的朋友可以參考下2023-12-12JS中判斷JSON數(shù)據(jù)是否存在某字段的方法
這篇文章主要介紹了JS中如何判斷JSON數(shù)據(jù)是否存在某字段,需要的朋友可以參考下2014-03-03