uniapp+微信小程序+最简单局部下拉刷新实现

直接上代码

<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。

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