当前位置: 代码迷 >> 综合 >> 解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题
  详细解决方案

解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题

热度:35   发布时间:2024-02-10 04:02:45.0

        移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,单纯来说这个效果并没有什么问题,但是它对H5页面却并不友好,会导致穿透,导致H5页面出现被截断的假象;

参考了很多文章之后,我采用了如下办法,亲测好用:

使用插件inobounce(但是只适用于ios系统,安卓不适用)

下载插件:

npm install inobounce -s

在需要处理的页面上添加如下代码:

<script>
import inobounce from 'inobounce'
export default {data() {return {  }},mounted() { },created() {let u = navigator.userAgentif (u.indexOf('iPhone') > -1) {inobounce.enable()}},beforeDestroy() {inobounce.disable()},methods: { }
}
</script>

就可以完美解决了;

  相关解决方案