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

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

相关推荐
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
半生过往6 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者10 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮12 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘16 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero19 小时前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app