总结uni中的下拉刷新和上拉加载

uni-app中有几种方式实现加载和刷新,下面我就分别介绍一下(我是使用的vue3进行开发)

页面实现刷新和加载

1. 首先我们要在配置文件中添加配置项(pages.json)

js 复制代码
 "enablePullDownRefresh": true

配置完就能看到下拉刷新和上拉加载的动作了,具体的逻辑需要自定义完成

2. 在页面中引入两个钩子函数

onReachBottom是上拉加载会触发的钩子函数

(onPullDownRefresh)是下拉刷新触发的钩子函数

js 复制代码
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

3. 自定义实现加载和刷新逻辑

  • 下拉刷新

这里需要注意onPullDownRefresh函数与onLoad钩子函数同级

js 复制代码
onLoad( ()=> {})

onPullDownRefresh(() => {
    GetOrderList(); // 获取数据的函数
    setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
    }, 1000);
});

这里的uni.stopPullDownRefresh是关闭下拉刷新动作的

如果你还需要其它的操作,可以去官网找对应的api onPullDownRefresh | uni-app官网 (dcloud.net.cn)

  • 上拉加载

上拉加载也就是分页加载,所以我们需要定义分页加载的数据

js 复制代码
const pageParams = ref({
    page: 1,
    pageSize: 3,
});
js 复制代码
onReachBottom(() => {
    pageParams.value.page++;
    // 这里的逻辑是根据后端放回的数据总数/每页条目数向上取整,然后跟+1后的page作比较
    if (pageParams.value.page <= Math.ceil(totalCount.value / pageParams.value.pageSize)) {
        GetOrderList(); // 获取自己的数据
    } else {
        loadmoreStatus.value = 'nomores';
    }
});

这样一个简单的上拉刷新和下拉加载就实现了。 但是上拉的时候是没有动画的,这就导致程序比较单一,我在这里使用uView-plus中的u-loadmore组件,大家也可以进行参考。uView-plus 3.0

局部实现刷新和加载

这里我们是使用了scroll-view标签上的属性和方法来实现uni-app官网

  • 下拉刷新
  1. 启用下拉刷新: 添加 refresher-enabled 属性。
  2. 下拉刷新事件:绑定 @refresherrefresh 事件。
  3. 添加 下拉刷新状态 标记: 添加 refresher-triggered 属性,用于关闭动画的。
  4. 下拉刷新事件内部:主要是重新获取数据,当数据获取成功后,主动关闭下拉刷新动画。注意在多个请求的情况下,需要用 Promise.all() 等所有请求都结束了,再关闭动画。
  • 上拉加载
  1. 定义 pageParams 对象,存储分页参数,包括页码 page 和每页数据量 pageSize
  2. 定义 finish 响应式引用,表示是否已加载完所有数据。
  3. 滚动触底事件:给 scroll-view 组件绑定 @scrolltolower 事件。
  4. 在事件内部需要判断是否已加载完所有数据,没有结束就继续发送请求,同时页码要累加,获取的数据要追加到原数组后,如果分页已结束,就更新 finish 标记,并提醒用户。

注意:使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给<scroll-view>添加white-space: nowrap;样式

只有给scroll-view标签设置固定高度时,才可以实现上拉加载

因为我还没有写完代码,等我写完这部分代码,再回来补充。

相关推荐
m0_748257185 分钟前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工22 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲1 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡2 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js