van-pull-refresh和van-list配合使用 ,实现上拉加载,下拉刷新功能
**问题1:**van-list 上拉加载之后,下拉滑动数据时,触发van-pull-refresh的下拉刷新,没有滑动数据到底部,再触发下拉刷新
**解决:**van-pull-refresh 要放到可以固定高度且可以滑动的div中
**问题2:**初始化页面多次加载,导致前面数据被后面数据覆盖,或相同数据重复加载。
- 组件原因,官方解释如下:
- onLoad 的操作是异步的,List的基础用法如下,在网络慢或其他原因导致,onLoad操作完成的时候,还没有获取回来数据,vant根据高度计算,不够就会继续触发onLoad 的操作,导致多次触发(注意:loading状态会被自动修改)
解决异步问题:
- 在请求接口前先判断loading状态,如果loading为true,表示当前已经在加载中,则直接返回,不进行重复请求。
- 自定义一个变量监听接口返回情况,请求结束后,才可以进行下一次请求。