Uni-App 实现上拉刷新和下拉加载：提升移动应用交互体验

Uni-App 实现上拉刷新和下拉加载：提升移动应用交互体验

摘要

本文将详细介绍如何在 UniApp 中实现上拉刷新和下拉加载功能。我们将通过两种方式来实现这一功能：一种是使用

onPullDownRefresh

和

onReachBottom

方法，另一种是使用

scrollView

组件。这两种方法各有优缺点，适用于不同的场景。文章将涵盖基础配置、代码实现和注意事项。

引言

在移动应用开发中，上拉刷新和下拉加载是常见的功能，可以显著提升用户体验。UniApp 提供了多种方式来实现这些功能。本文将详细介绍如何在 UniApp 中实现上拉刷新和下拉加载功能，帮助开发者更好地管理数据加载和刷新操作。

1. 通过

onPullDownRefresh

与

onReachBottom

方法实现

1.1 基础配置

// pages.json{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"首页","enablePullDownRefresh":true,"onReachBottomDistance":40}}]}

• enablePullDownRefresh: 开启下拉刷新功能。
• onReachBottomDistance: 设置触发上拉加载事件的距离，单位为像素。

1.2 页面代码

<!-- pages/index/index.vue --><script setup>import{ reactive, toRefs }from"vue";import{ onLoad, onReachBottom, onPullDownRefresh }from"@dcloudio/uni-app";import{ listUser }from"@/api";const data =reactive({
  params:{
    page:1,
    size:10,},
  list:[],
  total:0,
  isloading:false,});const{ params, list, total, isloading }=toRefs(data);constgetList=async(cb)=>{// 打开节流阀
  isloading.value =true;const res =awaitlistUser(params.value);// 关闭节流阀
  isloading.value =false;

  cb &&cb();if(res.status !==200)return uni.showToast({ title: res.message, icon:"none"});

  list.value =[...list.value,...res.data.records];
  total.value = res.data.total;};onLoad(()=>{getList();});/* 下拉刷新 */onPullDownRefresh(()=>{// 重置查询参数
  params.value.page =1;
  total.value =0;
  list.value =[];getList(()=>{
    uni.stopPullDownRefresh();});});/* 上拉加载更多 */onReachBottom(()=>{// 判断是否有下一页数据if(params.value.page * params.value.size >= total.value)return uni.showToast({ title:'数据加载完毕!', icon:"none"});// 判断是否正在请求其他数据, 如果是则不发起额外的请求if(isloading.value)return;

  params.value.page = params.value.page +1;getList();});</script><template><view><view v-for="(item, index) in list":key="index"><view>{{ item.name }}</view></view></view></template>

1.3 代码解释

• 基础配置: - params: 用于存储分页参数。- list: 存储请求到的数据。- total: 总数据条数。- isloading: 用于控制请求的节流阀。
• getList: 发起请求获取数据的方法 - 打开和关闭节流阀，防止频繁请求。- 将新获取的数据追加到 list 中。- 更新总数据条数 total。
• onLoad: 页面加载时调用 getList 方法初始化数据。
• onPullDownRefresh: 下拉刷新时重置分页参数并重新获取数据，刷新完成后调用 uni.stopPullDownRefresh 停止刷新动画。
• onReachBottom: 上拉加载更多时判断是否有下一页数据，如果有则增加页码并请求新数据。

2. 通过

scrollView

组件实现

2.1 页面代码

<!-- pages/index/index.vue --><script setup>import{ reactive, toRefs }from"vue";import{ onLoad }from"@dcloudio/uni-app";import{ listUser }from"@/api";const data =reactive({
  isRefresh:false,
  params:{
    page:1,
    size:10,},
  total:0,
  list:[],
  isloading:false,});const{ params, total, list, isloading, isRefresh }=toRefs(data);constgetList=async(cb)=>{// 打开节流阀
  isloading.value =true;const res =awaitlistUser(params.value);// 关闭节流阀
  isloading.value =false;

  cb &&cb();if(res.status !==200)return uni.showToast({ title: res.message, icon:"none"});

  list.value =[...list.value,...res.data.records];
  total.value = res.data.total;};/* 下拉刷新 */constpullDownRefresh=()=>{// 重置查询参数
  params.value.page =1;
  total.value =0;
  list.value =[];getList(()=>{
    isRefresh.value =false;});};/* 上拉加载 */constpullUpLoad=()=>{// 判断是否有下一页数据if(params.value.page * params.value.size >= total.value)return uni.showToast({ title:"数据加载完毕!", icon:"none"});// 判断是否正在请求其他数据, 如果是则不发起额外的请求if(isloading.value)return;

  params.value.page = params.value.page +1;getList();};onLoad(()=>{getList();});</script><template><scroll-view 
    scroll-y="true" 
    @refresherrefresh="pullDownRefresh"
    @scrolltolower="pullUpLoad":refresher-enabled="true":refresher-triggered="isRefresh"><view v-for="item in list":key="item.id">{{ item.name }}</view></scroll-view></template>

2.2 代码解释

• 基础配置: - isRefresh: 用于控制下拉刷新的状态。- params, list, total, isloading: 与方式一相同。
• getList: 与方式一相同，用于发起请求获取数据。
• pullDownRefresh: 下拉刷新时重置分页参数并重新获取数据，刷新完成后将 isRefresh 设为 false。
• pullUpLoad: 上拉加载更多时判断是否有下一页数据，如果有则增加页码并请求新数据。
• scroll-view: 使用 scroll-view 组件实现上拉加载和下拉刷新。 - scroll-y="true": 允许纵向滚动。- @refresherrefresh="pullDownRefresh": 绑定下拉刷新事件。- @scrolltolower="pullUpLoad": 绑定上拉加载事件。- :refresher-enabled="true": 开启下拉刷新功能。- :refresher-triggered="isRefresh": 控制下拉刷新的状态。

3. 总结

通过本文的介绍，我们学会了如何在 UniApp 中实现上拉刷新和下拉加载功能。两种方法各有优缺点：

• 方式一：使用 onPullDownRefresh 和 onReachBottom 方法，适合全局刷新和加载，实现简单。
• 方式二：使用 scroll-view 组件，适合局部刷新和加载，灵活性更高。

希望本文对你有所帮助，如果有任何问题或建议，欢迎留言交流！