vue h5页面滑动回弹问题解决

本文介绍了如何通过fixed定位使页面无滚动效果,并提到了阻止body touchmove事件防止下拉滑动的方法,适用于移动端开发和避免业务干扰。

方法一: 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
}

Vue2中,针对iOS移动端H5页面的橡皮筋回弹效果,我们可以使用JavaScript的事件监听和一些CSS样式来间接地控制。这里提供一种简单的方法,通过监听滚动事件并及时阻止默认的滚动行为来避免回弹: 首先,在Vue实例的生命周期钩子中添加滚动事件监听器: ```javascript export default { mounted() { window.addEventListener('touchmove', this.preventDefaultScroll, { passive: false }); // passive: false 阻止浏览器的滚动优化 }, beforeDestroy() { window.removeEventListener('touchmove', this.preventDefaultScroll); }, methods: { preventDefaultScroll(e) { if (e.targetTouches.length === 1) { // 只对单指触摸事件做处理 e.preventDefault(); // 阻止默认的滚动行为 } }, }, }; ``` 这段代码会在用户触摸屏幕移动时捕获事件,并通过`preventDefault()`函数阻止浏览器的默认滚动行为。 注意,`passive: false`是为了防止浏览器的滚动优化,它会让滚动事件始终触发,而不是仅在手指滑动时才触发。 另外,还可以结合CSS来进一步定制滚动体验,比如禁止元素内部的滚动条或者调整滚动性能: ```css body, html { touch-action: none; // 禁止所有touch相关的交互 -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */ } /* 或者单独为内容区域设置滚动 */ .content { overflow-y: auto; -ms-overflow-style: scrollbar; /* IE 和 Edge */ } ``` 不过,这种方法并不能完全消除所有iOS的橡皮筋感觉,因为这是系统级的行为。有些情况下,如列表滚动,可能会难以完全避免。如果你想要更精确的控制,可能需要考虑使用第三方库或者原生插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值