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

直接上代码

javascript 复制代码
<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

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

相关推荐
ModyQyW21 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
HERR_QQ8 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘14 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
mg66816 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳17 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12119 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero21 小时前
微信小程序41~50
微信小程序·小程序
耶啵奶膘1 天前
uniapp——地图路线绘制map
uni-app
shadouqi1 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app