uniapp如何禁止默认滚动

前言：

在开发uniapp应用时，有时候我们可能需要禁止页面的默认滚动功能。比如在某些场景下需要自定义滚动效果，或者弹出遮罩层时禁止页面滚动。下面将介绍如何在uniapp中禁止默认滚动的方法。

方法一：利用原生的css属性

一种简单的方法是利用CSS中的`overflow`属性来实现禁止滚动。我们可以在需要禁止滚动的页面或组件中，给根容器元素添加CSS样式`overflow: hidden;`。示例代码如下：

/* 在App.vue的style标签中添加样式 */
page {
  overflow: hidden;
}

方法二：使用插件

如果需要更加灵活地控制滚动行为，可以考虑使用uniapp的插件来实现禁止滚动功能。一个常用的插件是`better-scroll`，它是一款功能强大的滚动插件，适用于多端应用开发。下面是使用`better-scroll`禁止滚动的示例代码：

// 安装better-scroll插件
npm install better-scroll

// 在需要禁止滚动的页面或组件中引入并使用better-scroll
import BScroll from 'better-scroll';

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper, {
    // 禁止垂直滚动
    scrollY: false,
    // 禁止水平滚动
    scrollX: false
  });
}

总结：

通过上述方法，我们可以在uniapp中禁止默认滚动。第一种方法利用原生的CSS属性`overflow: hidden;`来实现，简单易用；第二种方法使用`better-scroll`插件，可以更加灵活地控制滚动行为。根据自己的需求选择合适的方法来实现禁止默认滚动功能。