uniapp如何禁止页面滚动-猿码集

Uniapp如何禁止页面滚动

在Uniapp中，禁止页面滚动是一个比较常用的操作。在一些特定的场景中，我们需要禁止页面滚动来提高用户体验。那么，如何在Uniapp中禁止页面滚动呢？下面我们将详细介绍。

方案一：使用CSS样式

我们可以通过CSS样式来实现禁止页面滚动。具体做法如下：

第一步，在全局样式文件（App.vue或者main.js）中添加以下CSS样式：


html,
body {
  overflow: hidden;
}

这段CSS样式会禁止整个页面的滚动。

第二步，在需要禁止滚动的页面中，添加以下CSS样式：


page-content {
  height: 100%;
  overflow: hidden;
}

这段CSS样式会禁止页面的滚动，同时保留页面内部的滚动。

这种方法简单易行，但是缺点是需要在每个需要禁止滚动的页面中都添加CSS样式，如果页面比较多，工作量会比较大。

方案二：使用插件

我们也可以使用插件来实现禁止页面滚动。这种做法比较简单，只需要安装一个插件就可以了。

第一步，在Uniapp项目中安装插件，比如better-scroll插件：

npm install better-scroll -S

第二步，在需要禁止滚动的页面中，使用better-scroll插件来实现：


import BScroll from 'better-scroll';
export default {
  mounted() {
    const wrapper = document.querySelector('.wrapper');
    this.scroll = new BScroll(wrapper, {
      disableMouse: true,
      disableTouch: false
    });
  }
};

这段代码会使用better-scroll插件来管理页面滚动，同时禁止鼠标滚轮的滚动。具体使用方法可以参考better-scroll的官方文档。

使用插件的方法比较简单，但是需要额外安装插件，可能会引入一些不必要的代码，也会涉及到插件的版本管理和更新。

方案三：使用v-on:touchmove事件

我们也可以使用v-on:touchmove事件来禁止页面滚动。具体做法如下：

第一步，在需要禁止滚动的页面中添加以下代码：


mounted() {
  document.body.addEventListener('touchmove', this.onTouchMove, {
    passive: false
  });
},
beforeDestroy() {
  document.body.removeEventListener('touchmove', this.onTouchMove, {
    passive: false
  });
},
methods: {
  onTouchMove(e) {
    e.preventDefault();
  }
}

这段代码会在页面加载和销毁的时候分别添加和移除v-on:touchmove事件，并且在这个事件中禁止默认的滚动行为。

使用v-on:touchmove事件的方法比较简单，但是需要注意的是，这种方法只能在移动设备上有效，而且可能会存在一些兼容性问题。

总结

在Uniapp中，禁止页面滚动是一个比较常用的操作。我们可以使用CSS样式、插件、v-on:touchmove事件来实现禁止滚动。其中，使用CSS样式最为简单，但是需要在每个页面中添加代码；使用插件可以避免这个问题，但是需要额外安装和维护插件；使用v-on:touchmove事件最为灵活，但是仅限于移动设备，并且可能存在一些兼容性问题。选择合适的方案需要根据实际需求来考虑。

uniapp如何禁止页面滚动