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

1.软文推荐

2.软文推荐

3.软文推荐

摘要：微信小程序是近年来兴起的一种轻量级应用程序，而在小程序中，有些情况需要保持页面的固定，禁止页面滚动，在本文中，将详细阐述如何实现微信小程序禁止页面滚动。

图片：

一、使用CSS样式实现

1、在需要禁止页面滚动的页面或组件的wxss文件中添加以下代码：

page{
  overflow: hidden;
}

2、这样就可以禁止页面滚动，通过设置overflow属性为hidden，可以规定不显示溢出内容，简单易懂。

二、使用嵌套页面实现

1、在app.json文件中配置需要嵌套的页面，如下：

{
  "pages": [
    "pages/index/index",
    {
      "path": "pages/nest/nest",
      "style": {
        "navigationBarTitleText": "嵌套页面"
      }
    }
  ]
}

2、在需要嵌套的页面的js中自定义onPageScroll函数，将scrollTop设置为0

Page({
  onPageScroll: function() {
    wx.pageScrollTo({
      scrollTop: 0
    })
  }
})

三、使用自定义组件实现

1、创建一个新组件，例如"custom-page"

2、在"custom-page"的wxss文件中添加以下代码：

.content{
  overflow: hidden;
}

3、在需要禁止页面滚动的页面或组件中引入"custom-page"组件，将代码插入到需要禁止页面滚动的位置。这样，就可以禁止页面滚动了。

四、使用微信小程序插件实现

1、在微信官方提供的插件市场中搜索"wx-disable-scroll"插件

2、在需要禁止页面滚动的页面或组件的js文件中引入插件：

var wxDisableScroll = requirePlugin("wx-disable-scroll");

3、在组件的onLoad函数中调用wxDisableScroll禁止页面滚动

Page({
  onLoad: function() {
    wxDisableScroll.disableScroll();
  }
})