uni-app scroll-view组件滚不动

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app scroll-view组件滚不动

操作步骤：

如上

预期结果：

就算scroll-view在最后，往上拉也应该触发滚动条，而不是触发页面的滚动

实际结果：

没有触发滚动条，触发了页面的滚动

bug描述：

在一个仿造微信聊天界面的页面中，连天记录使用的是scroll-view，用的固定定位，当前在最后一条聊天记录。 开始操作：手指往上拉，此举是客户确定是否为最后一条聊天记录（因为到底了，所以该操作没有触发scroll-view的滚动条），然后客户3秒之内往下拉，看看上面的聊天记录，结果拉不动。


| 项目属性         | 值           |
|------------------|--------------|
| 产品分类         | uniapp/App   |
| PC开发环境       | Mac          |
| PC开发环境版本号 | 13.7.2 (22H313) |
| HBuilderX类型   | 正式         |
| HBuilderX版本号 | 4.36         |
| 手机系统         | iOS          |
| 手机系统版本号   | iOS 18       |
| 手机厂商         | 苹果         |
| 手机机型         | iphone12mini |
| 页面类型         | vue          |
| vue版本          | vue3         |
| 打包方式         | 云端         |
| 项目创建方式     | HBuilderX    |

Harmonyos Next教程
2 回复

已解决，贴子没找到哪里删除


在 uni-app 中，scroll-view 组件是用来实现滚动视图的，如果发现 scroll-view 组件滚不动，通常是由于以下几个原因导致的：

  1. 未设置滚动方向或高度：scroll-view 组件需要明确指定滚动方向（scroll-y 或 scroll-x）以及一个固定的高度（对于垂直滚动）或宽度（对于水平滚动）。

  2. 内容未超出容器：如果 scroll-view 内的内容没有超出其容器的大小，滚动条自然不会出现，也无法滚动。

  3. CSS 样式冲突：某些 CSS 样式可能会导致 scroll-view 无法正常工作，比如 overflow 属性被设置为 hidden，或者 position: fixed 导致的内容被固定。

  4. 嵌套问题：在 scroll-view 内部嵌套了另一个 scroll-view，可能会导致滚动冲突。

下面是一个简单的 scroll-view 组件示例，展示了如何正确设置以实现垂直滚动：

<template>
  <view>
    <scroll-view scroll-y="true" style="height: 300px;">
      <view v-for="(item, index) in items" :key="index" class="scroll-item">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
    };
  }
};
</script>

<style>
.scroll-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
</style>

在这个例子中，scroll-view 组件的 scroll-y 属性被设置为 true，表示允许垂直滚动，同时 style 属性中设置了固定的高度 300px。内部的内容通过 v-for 指令生成了 20 个 scroll-item，每个 scroll-item 的高度为 50px，确保内容超出 scroll-view 的高度，从而触发滚动。

如果你的 scroll-view 仍然无法滚动，请检查：

  • 确保 scroll-view 的父容器没有设置 overflow: hidden。
  • 确保 scroll-view 内部的内容确实超出了其指定的高度或宽度。
  • 检查是否有其他 CSS 样式或布局问题影响了 scroll-view 的表现。

通过这些步骤，通常可以解决 scroll-view 滚不动的问题。

回到顶部