van-pull-refresh和van-list配合使用时出现的问题以及解决方案

van-pull-refresh和van-list配合使用 ,实现上拉加载,下拉刷新功能

**问题1:**van-list 上拉加载之后,下拉滑动数据时,触发van-pull-refresh的下拉刷新,没有滑动数据到底部,再触发下拉刷新
**解决:**van-pull-refresh 要放到可以固定高度且可以滑动的div中

**问题2:**初始化页面多次加载,导致前面数据被后面数据覆盖,或相同数据重复加载。

  1. 组件原因,官方解释如下:

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  1. onLoad 的操作是异步的,List的基础用法如下,在网络慢或其他原因导致,onLoad操作完成的时候,还没有获取回来数据,vant根据高度计算,不够就会继续触发onLoad 的操作,导致多次触发(注意:loading状态会被自动修改)

在这里插入图片描述
解决异步问题

  1. 在请求接口前先判断loading状态,如果loading为true,表示当前已经在加载中,则直接返回,不进行重复请求。
  2. 自定义一个变量监听接口返回情况,请求结束后,才可以进行下一次请求。

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 van-pull-refreshvan-list 的示例代码: ```vue <template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list :loading="loading" :finished="finished" :error="error" @load="onLoad"> <van-cell v-for="(item, index) in list" :key="index">{{ item }}</van-cell> </van-list> </van-pull-refresh> </template> <script> export default { data() { return { refreshing: false, loading: false, finished: false, error: false, list: [], page: 1, limit: 10 }; }, methods: { onRefresh() { this.refreshing = true; setTimeout(() => { this.page = 1; this.list = ['Item 1', 'Item 2', 'Item 3']; this.finished = false; this.refreshing = false; }, 1000); }, onLoad() { if (this.loading || this.finished) { return; } this.loading = true; setTimeout(() => { if (this.list.length >= 40) { this.finished = true; } else { this.page++; this.list.push(`Item ${this.page * this.limit - 8}`, `Item ${this.page * this.limit - 7}`, `Item ${this.page * this.limit - 6}`, `Item ${this.page * this.limit - 5}`, `Item ${this.page * this.limit - 4}`, `Item ${this.page * this.limit - 3}`, `Item ${this.page * this.limit - 2}`, `Item ${this.page * this.limit - 1}`, `Item ${this.page * this.limit}`); } this.loading = false; }, 1000); } } }; </script> ``` 在这个示例中,我们使用 van-pull-refresh 包裹 van-list,并且监听其 @refresh 事件来触发下拉刷新。同van-list 组件中的一些属性(如 loading、finished、error)和事件(如 @load)可以用于控制和监听列表的加载情况。在 onRefresh 和 onLoad 方法中,我们可以根据需要进行数据的请求和更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值