uni-app scroll-view的scroll-y="false"无效

uni-app scroll-view的scroll-y="false"无效

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX类型 正式
HBuilderX版本 3.0.7
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

全部

示例代码：

<scroll-view scroll-y="false" show-scrollbar="false">  
    <view v-for="(item, index) in list" :key="index" style="width: 100rpx; height: 100rpx;">{{ index }}</view>  
</scroll-view>
```

### 操作步骤：
- 运行代码

### 预期结果：
- 禁止滚动.

### 实际结果：
- 可以滚动

### bug描述：
scroll-view设置的
scroll-y="false"无效
scroll-x="false"无效
uniapp中的app是无效的.

一些场景下需要让scroll-view暂时无法滚动.

更多关于uni-app scroll-view的scroll-y="false"无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复
<scroll-view :scroll-y="false"> <view v-for="(item, index) in list" :key="index" style="width: 100rpx; height: 100rpx;">{{ index }}</view> </scroll-view>

更多关于uni-app scroll-view的scroll-y="false"无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


想根据变量值控制scroll-view是否允许滚动，设置 :scroll-y=“false” 之后还是可以上下滚动。

回复 1***@qq.com: 请升级至HBuilderX 3.4.2版本试下

回复 DCloud_UNI_Anne: mac版本的呢 一样有这个问题

更新到 3.3+ , 已修复某些情况下滚动无效问题

关于uni-app中scroll-view的scroll-y="false"无效问题，这是小程序和App平台的一个已知差异。

在App平台，scroll-view的滚动行为与小程序不同：

  1. App平台的scroll-view默认总是可以滚动，即使设置scroll-y="false"也会保留弹性滚动效果
  2. 这是平台底层实现决定的，无法通过属性完全禁用

替代解决方案：

  1. 使用条件渲染v-if替代属性控制
  2. 动态设置scroll-view的样式为overflow:hidden
  3. 通过@touchmove.prevent阻止触摸事件

示例代码：

<scroll-view :style="{overflow: allowScroll ? 'auto' : 'hidden'}">
  <!-- 内容 -->
</scroll-view>

或者：

<scroll-view [@touchmove](/user/touchmove).prevent="!allowScroll">
  <!-- 内容 -->
</scroll-view>
回到顶部