uniapp中,如何禁止当前页面滚动

在uniapp中，可以通过设置页面的样式来禁止当前页面滚动。具体方法如下：

1. 在页面的style中添加如下样式：

page {
    overflow: hidden;
}

2. 通过JS动态设置样式来禁止滚动：

export default {
  onReady() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    // 禁止页面滚动
    uni.setStorageSync('canScroll', false)
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }
}

以上两种方法都可以禁止当前页面滚动。

相关问题

uniapp下拉刷新与页面滚动冲突

### 解决 UniApp 下拉刷新与页面滚动冲突的方法

在处理 UniApp 中 `scroll-view` 的下拉刷新功能时，如果遇到与页面其他部分的滚动行为发生冲突的情况，可以通过特定的方式加以解决。

对于页面中的滚动区域，通过阻止触摸事件冒泡到父级容器能够有效缓解这一现象。具体实现方式是在存在滚动需求的视图标签上添加自定义指令[@touchmove.stop @touch.stop]，这能防止触屏移动操作触发不必要的上级组件响应[^2]：

<view class="homeVContent" @touchmove.stop @touch.stop>
    <view v-for="widget in widgets" :key="widget.id" :class="widget.type === 'newOpenShop'|| widget.type === 'banner5' ? '' : 'grace-margin-top'">
        <a-widget :widget="widget"></a-widget>
    </view>
</view>

另外一种情况涉及到 WebView 组件内嵌套有独立滚动条目的 div 容器时，则需采用 JavaScript 方法动态监测这些子元素的位置状态。借助 evaluateJavascript 函数获取目标 DOM 节点（如 id 为 inner_scroll_box 的元素）当前顶部偏移量 scrollTop 值，在检测到该数值等于零的情况下允许执行下拉刷新动作；反之则屏蔽此交互逻辑[^3]。

综上所述，针对不同场景下的 scroll-view 和页面整体或其他控件间的滚动机制相互干扰问题，上述两种策略提供了有效的应对方案。

uniapp 下拉刷新当前页面

在UniApp中实现页面级别的下拉刷新，你可以按照以下步骤操作：

1. 首先，确保你的项目已经包含了UniApp提供的内置下拉刷新组件。这通常可以在`<template>`标签内添加`<refresh>`元素。

<view class="container">
  <refresh :show-loading="isRefreshing" @refresh-end="onRefreshEnd">
    <!-- 内容区域 -->
    <scroll-view class="content">
      <!-- 你的页面内容 -->
    </scroll-view>
  </refresh>
</view>

2. `isRefreshing`是一个布尔属性，用于控制下拉刷新的显示状态。当用户开始下拉时，设置为`true`，加载完成后恢复为`false`。

3. 创建`onRefreshEnd`函数，在用户完成下拉动作并松手后触发，这里你可以发送网络请求获取新数据并更新视图。

export default {
  data() {
    return {
      isRefreshing: false,
    };
  },
  methods: {
    onRefreshEnd() {
      this.isRefreshing = true; // 显示加载状态
      setTimeout(() => {
        this.isRefreshing = false; // 数据加载完毕后隐藏加载状态
        // 在这里模拟异步加载新数据
        this.loadNewData();
      }, 2000); // 模拟网络延迟时间
    },
    loadNewData() {
      // 这里替换为实际的网络请求，比如axios.get('...')
    },
  },
};

4. 确保你的滚动视图(`scroll-view`)有高度并且可以滚动，这样才能触发下拉刷新效果。

注意，如果你之前自定义了`pullToRefresh`配置，那么在使用内置的`refresh`组件时，可能会覆盖掉这些配置，所以你需要选择适合项目的方案。