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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章