直接上代码 

<scroll-view style="height: 27vh;" :scroll-top="scrollTop" scroll-y="true"@scrolltolower="onScrollToLower1" lower-threshold="50"refresher-enabled="true" @refresherrefresh="onRefresherRefresh" :refresher-triggered="refresherTriggered">
</scroll-view>
methods: {// 触底加载更多onScrollToLower1() {console.log("触底加载更多数据");this.loadMoreData();  // 调用加载更多数据的方法},// 下拉刷新async onRefresherRefresh() {console.log("开始刷新数据");this.refresherTriggered = true; // 显示刷新动画await this.refreshData();  // 重新获取数据this.refresherTriggered = false; // 关闭刷新动画}
}

1. style="height: 27vh;"

   • 设置 scroll-view 的高度为 27% 的视口高度 (vh)，确保它有固定高度，否则不会出现滚动条。

2. :scroll-top="scrollTop"

   • 绑定 scrollTop 变量，可以用于控制 scroll-view 的滚动位置。

   • 例如，scrollTop = 0 时，滚动条会回到顶部。

3. scroll-y="true"

   • 允许垂直滚动，启用纵向滚动功能。

4. @scrolltolower="onScrollToLower1"

   • 当滚动到底部时，触发 onScrollToLower1 事件。

   • 适用于上拉加载更多数据的场景，比如分页加载。

5. lower-threshold="50"

   • 设置触发 scrolltolower 事件的阈值，表示距离底部 50px 时，就会触发 onScrollToLower1。

   • 这样可以提前加载数据，避免用户滚到底部时出现短暂空白。

6. refresher-enabled="true"

   • 开启下拉刷新功能，用户可以下拉刷新 scroll-view 内容。

7. @refresherrefresh="onRefresherRefresh"

   • 监听下拉刷新事件，触发 onRefresherRefresh 方法。

   • 该方法通常用于重新获取数据并更新 scroll-view 的内容。

8. :refresher-triggered="refresherTriggered"

   • 绑定 refresherTriggered 变量，控制是否显示下拉刷新动画。

   • 当 refresherTriggered = true 时，会显示刷新动画，加载完数据后应设为 false。

只需要把滚动的内容放在这个中间即可