uniapp 手机端滚动不可用问题解决

最新推荐文章于 2025-03-16 20:24:49 发布

鱼要喝阔乐

最新推荐文章于 2025-03-16 20:24:49 发布

阅读量2.8k

点赞数 8

文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_51108556/article/details/132584927

版权

作者在使用H5页面中的Drawer组件时遇到滚动失效问题，发现将`<view>`替换为`<scroll-view>`并添加`scroll-y=true`属性后解决了问题，关键在于处理滚动区域的渲染方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在写h5页面的时候，遇到了几次滚动不能用的问题，（正常页面上没有，但是弹窗中就是滑动不了），还是记一下吧

上问题代码

<Drawer
    ref="showRight"
    mode="left"
    :mask-click="true"
    :width="clientWidth"
    :height="320"
  >
    <view class="flex-col items-center content">
      <view
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="
          () => {
            clickobj = item;
          }
        "
        class="flex-row justify-center items-center listItem"
        :class="clickobj.id == item.id ? 'activity' : ''"
      >
        {{ item.name }}</view
      >
    </view>
    <view class="submit" @click="emitBack"> 确定 </view>
  </Drawer>

<Drawer>是我封装的弹窗

其中的样式也是看起来没什么问题，当然，高是要固定好的，我这里用的max-height

.content {
  padding: 34px 0px 35px;
  max-height: 195px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.listItem {
  width: 100%;
  height: 40px;
}
.activity {
  color: $uni-color-primary;
}
.submit {
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  color: $uni-text-color-inverse;
  background-color: $uni-color-primary;
}

可就是不能滑动

解决办法：

将需要滑动的 <view> 直接变成 <scroll-view>就好，并加上属性 scroll-y="true" ，并且没有改样式，就解决了

<Drawer
    ref="showRight"
    mode="left"
    :mask-click="true"
    :width="clientWidth"
    :height="320"
  >
    <scroll-view scroll-y="true" class="flex-col items-center content">
      <view
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="
          () => {
            clickobj = item;
          }
        "
        class="flex-row justify-center items-center listItem"
        :class="clickobj.id == item.id ? 'activity' : ''"
      >
        {{ item.name }}</view
      >
    </scroll-view>
    <view class="submit" @click="emitBack"> 确定 </view>
  </Drawer>