当前位置：首页 > uni-app

uniapp 纵向滚动

2026-02-06 00:42:51uni-app

实现纵向滚动的方法

在UniApp中实现纵向滚动通常可以通过以下几种方式完成，具体选择取决于需求场景。

使用scroll-view组件

scroll-view是UniApp提供的滚动容器组件，通过设置scroll-y属性开启纵向滚动。需注意设置固定高度以确保滚动生效。

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

关键点：

scroll-y属性必须设置为true
必须通过CSS或内联样式指定明确高度
子元素高度总和需超过容器高度才会触发滚动

页面级滚动

UniApp默认支持页面级滚动，只需确保内容高度超出屏幕即可。无需额外组件，适合全屏滚动场景。

<template>
  <view>
    <view v-for="item in longList" :key="item.id">{{item.content}}</view>
  </view>
</template>

注意事项：

页面json配置中需禁用"disableScroll": false（默认值）
页面根元素不要设置height:100%，可能影响滚动

使用CSS overflow

通过CSS实现滚动区域，适合局部滚动需求：

<view class="scroll-container">
  <view v-for="i in 50">Item {{i}}</view>
</view>

<style>
.scroll-container {
  height: 400rpx;
  overflow-y: auto;
}
</style>

特性：

兼容H5和小程序平台
需注意不同平台对overflow属性的支持差异

性能优化建议

对于长列表滚动，推荐使用<recycle-list>或<unicloud-db>组件：

<recycle-list :size="50" :total="1000">
  <cell v-for="(item,index) in list" :key="index">
    <text>{{item}}</text>
  </cell>
</recycle-list>

优势：

实现虚拟滚动，只渲染可视区域元素
大幅提升长列表滚动性能
需配合后端分页接口使用

平台差异处理

不同平台滚动行为可能不一致，可通过条件编译处理：

<!-- #ifdef H5 -->
<div class="h5-scroll">
<!-- #endif -->
<!-- #ifndef H5 -->
<scroll-view scroll-y>
<!-- #endif -->
  <!-- 内容区 -->
<!-- #ifdef H5 -->
</div>
<!-- #endif -->
<!-- #ifndef H5 -->
</scroll-view>
<!-- #endif */

uniapp 纵向滚动