uniapp 纵向滚动

uniapp 实现纵向滚动的方法

在 uniapp 中实现纵向滚动可以通过多种方式完成，以下是常见的几种方法：

scroll-view 组件

使用 scroll-view 组件并设置 scroll-y 属性为 true 可以启用纵向滚动。需要为 scroll-view 指定固定高度以确保滚动生效。

<scroll-view scroll-y style="height: 300px;">
  <view v-for="item in list" :key="item.id">{{ item.text }}</view>
</scroll-view>

页面级滚动

在页面配置中启用页面级滚动，适用于需要整个页面滚动的场景。在 pages.json 中为对应页面配置 "enablePullDownRefresh": true 或设置 "disableScroll": false。

{
  "path": "pages/index/index",
  "style": {
    "enablePullDownRefresh": true,
    "disableScroll": false
  }
}

CSS 样式控制

通过 CSS 设置 overflow-y: auto 或 overflow-y: scroll 实现纵向滚动。需要确保容器有固定高度。

<view class="scroll-container">
  <view v-for="item in list" :key="item.id">{{ item.text }}</view>
</view>

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

注意事项

• 确保滚动容器有明确的高度值，否则滚动可能无法生效。
• 在 scroll-view 中使用 scroll-top 属性可以控制滚动位置。
• 对于长列表，建议使用 uvue 或 uni-list 组件优化性能。