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 EventDOM 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值