移動端touch事件 上拉載入更多

2022-07-03 12:45:08 字數 2207 閱讀 1691

我不認為是外掛程式的問題,當時的想法是覺得引用的外掛程式存在衝突),於是,我就直接通過封裝touch事件完成上拉載入實現分頁的功能。

備註:文章最後會加上為實現這個功能我找的一些外掛程式

在應用touch事件實現上拉載入更多實現分頁的效果上,其實我們用到的只有touchstart,touchmove,touchend,touchcancel事件,還有targettouches[0]

和changedtouches[0]屬性即可完成簡單的分頁效果。

在執行touch事件的時候,在大多數情況下我們需要注意的就是阻止瀏覽器的預設行為,例如滾動事件或者瀏覽器的縮放,可以通過html頁面加上meta標籤禁止

使用者縮放:,然後

在touch事件上加上event.preventdefault()阻止預設事件。

通過基於zepto簡單的封裝了touch事件上拉載入更多的效果。

1 ;(function

($,window,undefined) ,//

touchstart的位置資訊

5 endpos:{},//

touchmove的位置資訊

6 upordown:'',//

up:為上拉載入,down為下拉重新整理

7 winhigh:0,//

瀏覽器的高度,

8 dochigh:0,//

文件的高度,對應於頁面總高度

9 scrollhigh:0,//

滾動的高度

10 notdefault:false,//

是否阻止預設行為

11//

dochigh=winhigh+scrollhigh

12 init:function

()else

18},

19 touchevents:function

();28 that.winhigh=$(window).height();//

可視視窗高度

29 that.dochigh=$(document).height();//

總高度30 that.scrollhigh=$(window).scrolltop();//

滾動高度

31});

32 $("body").on("touchmove",function

(e)

36var touch=e.targettouches[0];

37 that.endpos=;

42 that.upordown=that.endpos.y-that.startpos.y;

43});

44 $("body").on("touchend touchcancel",function

(e) ,1000);52}

53})54}

55};

56userdefinedslide.init();

57 })( zepto ,window,undefined);

而基於是在touchmove事件執行獲取觸控位置還在touchend/touchcancel事件執行獲取觸控位置則我沒有過多的考究。

要在touchend/touchcancel事件獲取觸控位置的話則需要將var touch=e.targettouches[0];調整為var touch=e.changedtouches[0];

因為,touchend/touchcancel事件沒有targettouches屬性,只有changedtouches屬性。

可能有人存在疑惑,為啥要繫結touchend和touchcancel兩個事件呢,個人事件,發現在部分安卓手機上會在touchend事件上有bug,不能

執行,所以通過執行touchcancel事件:當系統停止跟蹤觸控的時候觸發,來達到touchend的效果。

通過我上面對touch事件的簡單封裝就可實現上拉載入更多實現分頁的效果了。

dropload:

iscroll:

swiper:也可實現上拉載入更多)

mescroll:

移動端 touch事件

在模擬器下不支援用on的方式來給元素加touch事件,推薦用addeventlistener方式 mouse事件的觸發必須在元素範圍內,且在移動端會有300ms左右的延遲 在移動端,觸碰乙個元素時,會立即執行新增在元素上的touch事件,然後記錄座標,300ms之後在這個座標點查詢元素,如果找到元素...

移動端touch事件

1 touch事件 touch,觸控,是移動端的觸控事件,是一組事件 1.touchstart 當手指觸控到螢幕的時候觸發 只會觸發一次 2.touchmove 當手指在螢幕中滑動時觸發 一直觸發 3.touchend 當手指離開螢幕時觸發 只會觸發一次 4.touchcancel 被迫中止滑動時觸...

移動端touch事件

touch 事件 首先 touch 包含三類事件,它們分別是 touchstart touchmove touchend 望文生義這種本能相信你應該會有,但在這裡我還是有必需對這三個詞進行一翻不必要的解釋。touchstart 手指觸控到乙個 dom 元素時觸發。touchmove 手指在乙個 do...