各类浏览器禁止页面拖动-H5页面bug解决
代码已上传至github
github代码地址：https://github.com/Miofly/mio.git
最近在开发新项目时，使用了一个列表滚动插件，支持下拉刷新与上拉加载，但是下拉刷新时总是会触发浏览器的自身的下拉刷新，导致了很多意外的bug。在某些浏览器可能不会出现这种情况，但是qq浏览器总是会触发其自身的下拉刷新，导致会插件的下拉刷新有冲突，会使得插件的下拉刷新卡主。解决方法如下。
在原生H5中使用
document.body.addEventListener('touchmove', function (evt) { 拖动
evt.preventDefault()
}, {passive: false}在vue中使用
created() {
document.body.addEventListener('touchmove', function (evt) { // 禁止微信浏览器拖动
evt.preventDefault()
}, {passive: false})
// 需要固定swiper的高度
// this.height = uni.getSystemInfoSync().windowHeight + 'px'
console.log(this.height)
},在uniapp中使用
onLoad() {
document.body.addEventListener('touchmove', function (evt) { // 禁止微信浏览器拖动
evt.preventDefault()
}, {passive: false})
// 需要固定swiper的高度
// this.height = uni.getSystemInfoSync().windowHeight + 'px'
console.log(this.height)
}下拉刷新上拉加载插件推荐：
mescroll - 支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动
文档链接： http://www.mescroll.com/uni.html?v=20200315
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
