ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

处理vant list使用bug地点

2021-12-23 15:33:42  阅读:410  来源: 互联网

标签:onLoad vant text list 滚动条 finished error 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有