小程序禁止ios边界回弹

1、disableScroll

在页面的json文件中配置：

{
  "disableScroll":true
}

该方法是禁止整个页面的边界回弹

若是页面中还是需要有滚动的区域，可以使用view并固定高度

{
  height: 800rpx; //高度必须是固定的值
  overflow-y: auto;
}

这种方式滚动区域仍然会有边界回弹，如果希望滚动区域也没有回弹，就要用到scroll-view

<scroll-view bounces="{{false}}" scroll-y="true" style="height: 600rpx;" enhanced>
        <view class="item" wx:for="{{15}}">111</view>
</scroll-view>

加上bounces="{{false}}"和enhanced，滚动区域就不会回弹了

2、catchtouchmove

给根元素加上catchtouchmove="return"，并设置根元素宽高为100vw和100vh，如果不设置根元素宽高，则无法取消整个页面的回弹。

设置该属性后，页面将无法滚动。若需要滚动区域，可以使用上述scroll-view的方法。

<view class="test" catchtouchmove="return">
    <scroll-view bounces="{{false}}" scroll-y="true" style="height: 600rpx;" enhanced>
        <view class="item" wx:for="{{15}}">111</view>
    </scroll-view>
</view>

.test {
    width: 100vw;
    height: 100vh;
}

3、page-meta

添加page-meta标签，设置页面根节点样式page-style，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点。

在wxml页面中添加：

<page-meta page-style="overflow: hidden" />

作用和disableScroll类似，不同的是，这个可以动态控制，而disableScroll写在json文件中，将无法动态修改，如：

<page-meta page-style="overflow: {{isIOS ? 'hidden' : 'auto'}}" />