uni-app uni-data-select搭配scroll-view一起使用导致屏幕不能滑动

uni-app uni-data-select搭配scroll-view一起使用导致屏幕不能滑动

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Mac
操作系统版本 m2
开发工具 HBuilderX
工具版本 4.76
浏览器平台 Chrome
浏览器版本 141.0.7390.108
项目创建方式 HBuilderX

操作步骤：

粘贴代码就能复现

预期结果：

可以正常滑动

实际结果：

不能滑动

bug描述：

uni-data-select搭配scroll-view一起使用导致屏幕不能滑动
当下拉框处于展开时scroll-view页面不能滑动
以下是代码（h5端）：

<scroll-view scroll-y style="width: 50%;height: 90vh;margin: 0 auto;">
<view style="width: 100%;height: 4000px;background-color: antiquewhite;">
<uni-data-select  
v-model="value"  
localdata="range"
[@change](/user/change)="change">
</uni-data-select>
</view>
</scroll-view>

更多关于uni-app uni-data-select搭配scroll-view一起使用导致屏幕不能滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

data-select 中有一个 scroll-view 注意是不是 scroll-view 嵌套了

更多关于uni-app uni-data-select搭配scroll-view一起使用导致屏幕不能滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的滚动冲突问题。当uni-data-select下拉框展开时，其弹出层会阻止底层页面的滚动事件。

解决方案：

  1. 使用条件渲染：当下拉框展开时，动态禁用scroll-view的滚动
<scroll-view :scroll-y="!selectOpen" style="width: 50%;height: 90vh;margin: 0 auto;">
<view style="width: 100%;height: 4000px;background-color: antiquewhite;">
<uni-data-select  
v-model="value"  
localdata="range"
@click="handleSelectClick"
@close="handleSelectClose"
@change="change">
</uni-data-select>
</view>
</scroll-view>

data() {
  return {
    value: '',
    selectOpen: false
  }
},
methods: {
  handleSelectClick() {
    this.selectOpen = true
  },
  handleSelectClose() {
    this.selectOpen = false
  }
}
  1. 使用CSS穿透：当下拉框展开时，通过CSS强制允许滚动
/* 当下拉框展开时 */
:deep(.uni-select) .uni-select__selector {
  pointer-events: none;
}
回到顶部