移動端touch事件 || 上拉加載更多

時間 2019-11-13

標籤移動 touch 事件加載更多欄目無線简体版

原文原文鏈接

前言：

說多了都是淚，在進行項目開發時，在上拉加載更多實現分頁效果的問題上，因爲當時開發任務緊急，因此就百度找了各類移動端的上拉下拉html

實現加載更多的插件。而後就留下了個坑：上拉加載的時候會因爲用戶錯誤的姿式，例如長按後再touchmove等會出現卡死的假象。(ps：固然，git

我不認爲是插件的問題，當時的想法是以爲引用的插件存在衝突)，因而，我就直接經過封裝touch事件完成上拉加載實現分頁的功能。github

備註：文章最後會加上爲實現這個功能我找的一些插件web

瞭解touch事件

在應用touch事件實現上拉加載更多實現分頁的效果上，其實咱們用到的只有touchstart，touchmove，touchend，touchcancel事件，還有targetTouches[0]瀏覽器

和changedTouches[0]屬性便可完成簡單的分頁效果。異步

瞭解更多touch事件的方法能夠訪問：ide

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch動畫

touch事件須要注意事項

在執行touch事件的時候，在大多數狀況下咱們須要注意的就是阻止瀏覽器的默認行爲，例如滾動事件或者瀏覽器的縮放，能夠經過html頁面加上meta標籤禁止this

用戶縮放：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">，而後spa

在touch事件上加上event.preventDefault()阻止默認事件。

上代碼

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

 1 ;(function ($,window,undefined) {
 2         var userDefinedSlide={
 3             isSupportTouch:"ontouchstart" in document ? true :false,
 4             startPos:{},//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(){
13                 if(!this.isSupportTouch){
14                     console.warn('touch events are not supported at current device');
15                 }else{
16                     this.touchEvents();
17                 }
18             },
19             touchEvents:function(){
20                 var that=this;
21                 $("body").on("touchstart",function (e) {
22                     var touch=e.targetTouches[0];
23                     that.startPos={
24                         x:touch.pageX,
25                         y:touch.pageY,
26                         time:+new Date()
27                     };
28                     that.winHigh=$(window).height();//可視窗口高度
29                     that.docHigh=$(document).height();//總高度
30                     that.scrollHigh=$(window).scrollTop();//滾動高度
31                 });
32                 $("body").on("touchmove",function (e) {
33                     if(that.notDefault){
34                         e.preventDefault();
35                     }
36                     var touch=e.targetTouches[0];
37                     that.endPos={
38                         x:touch.pageX,
39                         y:touch.pageY,
40                         time:+new Date()
41                     };
42                     that.upOrDown=that.endPos.y-that.startPos.y;
43                 });
44                 $("body").on("touchend touchcancel",function (e) {
45                     if(that.upOrDown < 0 && that.docHigh<=(that.winHigh+that.scrollHigh)){
46                         console.log('is to bottom');
47                         //可執行動畫效果
48                         setTimeout(function(){
49                             //須要異步加載數據放置位置
50                             //若執行動畫，則加載數據後移除動畫效果
51                         },1000);
52                     }
53                 })
54             }
55         };
56         userDefinedSlide.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事件的簡單封裝就可實現上拉加載更多實現分頁的效果了。

移動端touch事件 || 上拉加載更多

前言：

瞭解touch事件

touch事件須要注意事項

上代碼

更多上拉加載更多、下拉刷新插件：