其他分享
首页 > 其他分享> > 处理vant list使用bug地点

处理vant list使用bug地点

作者:互联网

1.使用vant-list在滚动条触底的时候,没有触发onLoad事件
可能是因为在van-list父元素的地方设置了父元素高度为100%,这里不能这样设置,
还有就是可能对需要遍历的数据,在每一次触底时,都进行了初始化
2.有时候在tab标签切换后,滚动条不再触发onLoad事件
解决方法是,在切换标签函数后,加上
this.loading=true
this.finished =false
3.下拉刷新时,数据一直在加载中,
这是因为少写了,this.refreshing = false;
vant组件中,把这条语句写在onLoad()函数中,通过onRefresh()函数调用onLoad()时完成语句的实现,
但是有时候没有写在onLoad()函数中,是需要我们自己添加在onRefresh()函数里。

对于其各个api的理解
<van-pull-refresh v-model=“refreshing” @refresh=“onRefresh”>
<van-list
v-model=“loading”
:finished=“finished”
finished-text=“没有更多了”
@load=“onLoad”
:offset=“10”
:error.sync=“error”
error-text=“请求失败请重新加载”
>
@refresh = “onRefresh”,定义的是当列表下拉时,(其实可以理解为鼠标点击并下拉,然后松开的的事件),这个就是对数据进行刷新,回到没有触发onLoad()函数之前

@load=“onLoad”,定义的是当滚动条滚动到底部时,触发onLoad事件

loading,finished,error,他们都是布尔值
loading是用来表示加载状态的
finished表示数据加载完,显示finished-text文字
error表示当数据加载失败时,显示error-text文字
offset代表当滚动条距离底部小于该数值时,触发onLoad事件

标签:onLoad,vant,text,list,滚动条,finished,error,bug,加载
来源: https://blog.csdn.net/weixin_48687415/article/details/122107933