vue h5页面滑动回弹问题解决
方法一: fixed定位检查问题,发现页面没高度,解决办法:html,body统一设为100%,在父组件的根元素设置position:fixed可以使页面无橡皮筋效果<style>.layout{position: fixed;top: 0;bottom: 0;width: 100%;height: 100%;overflow: hidden;}</style>不要将手机页
·
方法一: fixed定位
检查问题,发现页面没高度,解决办法:
html,body统一设为100%,在父组件的根元素设置position:fixed可以使页面无、回弹效果
<style>
.xxx{
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
不要将手机页面的高度设为100vh,手机浏览器上有地址栏,下有功能键,会占据高度。
方法二:阻止body的touchmove事件
可以将body的touchmove事件禁止,放到app.vue的话会影响业务的滚动需求,比如overflow-y: scroll;上啦加载之类的
// App.vue
mounted () {
document.body.addEventListener('touchmove', function (e) {
e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}) // passive 参数不能省略,用来兼容ios和android
}
更多推荐
已为社区贡献5条内容
所有评论(0)