说明: 事件拦截的操作主要针对scroll-view组件,首先需要搞明白为何使用事件拦截;
scroll-view:是微信提供可以上下左右滚动的组件 官网地址: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
如果没用过该组件的可以看着官方文档练习练习
{
"title": [{
"id": "#title1",
"content": "使用事件拦截方式解决什么问题?",
"ztitle": null
}, {
"id": "#title2",
"content": "事件拦截实现方式",
"ztitle": null
}, {
"id": "#title3",
"content": "如何在聊天系统框架中布局事件拦截",
"ztitle": null
}]
}
使用事件拦截方式解决什么问题?
说明: 在公司开发一个为微信小程序的时候,开发一个 滑动标签卡尺, 日历组件, 聊天系统(可查看历史消息-分页), 事件卡片的分页滚动;
使用scroll-view所碰见的问题: 使用scroll-view做分页数据展示,或是写日历插件数据刷新的时候,经常会有以下的需求:
1.在数据刷新的时候需要定位到某个标签的位置.2.滚动到底部的时候触发一个函数刷新数据,并做定位3.滚动到顶部的时候触发一个函数刷新数据,并做定位
1> 在使用scroll-view的时候, 经常用到三个事件
scroll-into-view |
值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 |
bindscrolltoupper |
滚动到底部/右边时触发 |
bindscrolltolower |
滚动到顶部/左边时触发 |
scroll-view我们经常会采用scroll-into-view做定位,而且,滚动到底部或是顶部的时候接着触发函数并且定位,但是scroll-view定位的时候在特定的条件下会触发其他两个函数,导致数据出现异常.体验比较差,
但是这个问题还好,修复了大半天终于修复好了.然而测试的时候,幸运的事儿出现了.ios 滚动到顶部或是底部触发事件,就滚动一次,但是该事件却一下子触发了将近20多次.又出现了数据异常.(在写scroll-view
下拉展示历史消息的时候碰见该问题,就ios下拉一次方法连续触发20多次, 就算是微信小程序,也没有解决ios和安卓端兼容的问题,有的需要针对性的去优化)
微信小程序的兼容性测试
事件拦截实现方式
1> 首先,写一个scroll-view,并添加滚动到底部触发的函数,然后刷新数据的时候定位到倒数第一个或是第二个标签
如何在聊天系统框架中布局事件拦截
原文地址：https://www.cnblogs.com/han-guang-xue/p/12172922.html