微信小程序滚动条事件详解

时间：2023-07-01 14:05 阅读数：115 人阅读分类：知识百科

　　微信小程序滚动条事件详解，小程序滚动条事件是需要分很多种情况的，也就是说触发小程序滚动条有几种情况，下面我们一起看看微信小程序滚动条事件详解。

　　微信小程序滚动条事件详解：

　　什么是事件?

　　事件是小程序视图层到逻辑层的通讯方式。

　　事件可以将用户的行为反馈到逻辑层进行处理。

　　事件能够在小程序组件上绑定，一旦小程序用户触发了事件，小程序逻辑层中相应的事件的处理函数会自动执行起来。

　　事件对象可以携带额外信息，如id, dataset, touches。

　　事件分类

　　touchstart 手指触摸

　　touchmove 手指触摸后移动

　　touchcancel 手指触摸动作被打断，如弹窗和来电提醒

　　touchend 手指触摸动作结束

　　tap 手指触摸后离开

　　longtap 手指触摸后后，超过350ms离开

　　下面我们主要的来介绍下滑动事件，主要是这和小程序滚动条有密切联系。

　　小程序滚动条滑动事件：

　　手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。滑动事件由touchstart、touchmove、touchend组成

坐标图：

　　以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大(注意跟数学象限的区别)。

　　假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by < ay;

　　同理，向右滑动到C(cx,cy),满足cx > ax;向下滑动到D(dx,dy),满足dy > ay;向左移动到E(ex，ey)满足ex < ax.

　　计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n

　　计算r = m/n,如果r > 1,视为向上滑动。

　　同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动。

　　以上没考虑r为1的情况。

　　以下是小程序代码：

　　微信小程序滚动条事件详解就介绍到这里了，这里只是介绍了小程序滚动条事件，如果你还想知道更多的小程序触发事件的内容，欢迎关注微小乔哦，里面有很多小程序的教程知识。