我不認為是外掛程式的問題,當時的想法是覺得引用的外掛程式存在衝突),於是,我就直接通過封裝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...