微信小程序如何禁止页面滚动

为什么需要禁止页面滚动

现在很多微信小程序默认页面可滚动，但有些页面存在某些需要禁止滚动的情况。

例如：弹出层、下拉列表等需要固定页面的组件，如果页面可以滚动，会导致用户体验下降，不能正常使用。

禁止页面滚动的方法

方法一：在 wxml 页面中使用 scroll-view 并设置 `scroll-y` 属性为 false。

<scroll-view scroll-y="false">
  . . .
</scroll-view>

方法二：在 JS 中使用 Page 的 onPullDownRefresh 方法，并调用 stopPullDownRefresh 方法，停止当前页面的下拉刷新。

Page({
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh()
  }
})

方法三：在 wxss 中设置 body 的 overflow 为 hidden。

body {
  overflow: hidden;
}

注意：如果使用了此方法，在包含当前组件的页面也会被禁止滑动。

注意事项

禁止页面滚动的同时，也要考虑到用户体验。

在弹窗等需要禁止滚动的组件出现时，最好使用动画效果，让用户更容易接受。

同时，处理好禁止滚动和启用滚动的转换，确保用户能正常使用页面。

美国高防云服务器