用过微信的人几乎都知道,在微信中浏览网页时可以下拉查看网站的网址。这确实是一项实用的功能,使用户能够追溯内容提供者,减少被仿冒、钓鱼网站欺骗的风险。不过有时候它确实也对网页的操作产生了干扰。
举个例子,我想要给页面增加一个下拉刷新的功能,但是用户的手指在屏幕上滑动的时候会同时触发整个页面的下拉(显示网址)。这显然不是我想要的效果,必须想办法禁用或者阻止下拉显示网址这一默认动作。
有人建议这么做:
1 | document.body.addEventListener('touchmove', (event) => { |
确实,这样做能够取消 touchmove
事件(手指滑动)的全部默认动作,但页面的滚动也被一并禁用掉了。如果你的页面不需要滚动,当然可以这么做。我的想法是,只需要在页面滚动到最顶部,且用户的触摸操作为下拉时取消默认动作即可。
1 | // 滑动起始点坐标 |
preventWxPullDown
方法尝试在页面滚动到最顶部(即 scrollTop
等于0),且手指向屏幕下方滑动(即 Y 轴移动距离为正数且 Y 轴移动距离大于 X 轴移动距离)时取消默认动作。实测在阻止下拉显示网址的同时确实不会影响到页面的正常滚动,刚好满足我的需要。
Tips: 当手势为先上滑再下拉时无效。
相关环境:Windows 7 x64 / WeChat 6.5.16