Apicloud 能用H5本身的滾動監聽嗎？

答案是肯定的啊，不然我寫什麼。

Apicloud 自身暴露出來的API

// 對swipeleft 、swipedown、swipeup、swiperight（關鍵詞）監聽，實現簡單的滑動監聽

api.addEventListener({
    name:'swipedown'      
}, function(ret, err){        
   alert('向下輕掃');
});

// 滾動到底部監聽
api.addEventListener({
    name:'scrolltobottom',
    extra:{
        threshold:0            //設置距離底部多少距離時觸發，默認值爲0，數字類型
    }
}, function(ret, err){        
    alert('已滾動到底部');
});

以上是官方給定的Api，假如我想知道滾動的明確距離？，這樣顯然不滿足呢。下面是非官方方法：

給div設置滾動屬性

<div id="tbody"  tapmode
             ontouchstart="getPosition(event)"   ontouchmove="getPositionEnd(event)"  >
            </div>
//ontouchend  必須手擡起時才能監聽到

調用方法爲：

<script type="text/javascript">
var positionX；
  function getPosition(ev){
    //獲取X軸方向的起始點
     positionX = ev.touches[0].pageX;
      console.log(positionX);   
     // 也可以pageY
      }
      
      function  getPositionEnd(ev){
        var psx = ev.touches[0].pageX ;
        console.log(psx);
      // 判斷兩數差值  判斷左滑動右滑動
        console.log(positionX - psx)；
      }
</script>

以上呢，是手動獲取加判斷，那麼多的H5監聽呢？

給div設置監聽

這個是直接調用H5本身的監聽去實現功能，大致邏輯如此，可拿去參考

window.addEventListener('load', function () {
        document.addEventListener('touchmove', touch, false);
        document.addEventListener('touchend', touch, false);

        function touch(event) {
            var event = event || window.event;

            switch (event.type) {
                case "touchmove":
                //執行方法
                    changeCss();
                    break;
                case "touchend":
                  //執行方法
                    changeCss();
                    break;
            }
        }
    }, false);

    window.onscroll = function (ev) {
      //執行方法
        changeCss()
    }

window.scrollY ;   //即爲Y軸移動的距離

對於監聽還需要注意一下：
Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文檔節點、document、window 或 XMLHttpRequest。
type： 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false);

IE中：
target.attachEvent(type, listener);
target： 文檔節點、document、window 或 XMLHttpRequest。
type： 字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。 例如：document.getElementById(“txt”).attachEvent(“onclick”,function(event){alert(event.keyCode);});

W3C 及 IE 同時支持移除指定的事件, 用途是移除設定的事件, 格式分別如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的進化:

DOM 0 Event	DOM 2 Event
onblur()	blur
onfocus()	focus
onchange()	change
onmouseover()	mouseover
onmouseout()	mouseout
onmousedown()	mousedown
onmouseup()	mouseup
onmouseup()	mouseup
onclick()	click
ondblclick()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
onsubmit()	submit
onload()	load
onunload()	unload

關於二者監聽的不同，大家可以參考：https://www.cnblogs.com/ConfidentLiu/p/7815624.html