目录
Vant 是一个基于 Vue.js 框架的移动优先 UI 工具包。Vant 是一个基于 Vue.js 构建的轻量级移动 UI 组件库,它的设计易于使用和可定制,这使其成为构建移动应用程序的不错选择。Vant 提供了广泛的组件,包括按钮、表单、列表、模态框等,旨在与 Vue.js 无缝协作,帮助开发人员快速构建高质量、交互式的移动应用程序。Vant 的一些功能包括:
- 移动优先设计:Vant 的组件旨在在移动设备上看起来很棒
- 可定制:Vant 的组件是高度可定制的,因此您可以轻松调整它们以适合您的应用程序设计
- 轻量级:Vant 的组件轻量且快速,因此它们不会减慢您的应用程序
- Well-documented:Vant的组件文档齐全,可以快速学会如何使用它们
Vant3 是 Vant 的最新版本,使用 TypeScript 构建,提供更稳定、更强的开发体验。
总体而言,Vant3 是使用 Vue.js 构建移动应用程序的绝佳选择,它轻量级、可定制且易于使用,使其成为开发人员的热门选择。
使用vant3 List 组件过程中遇到的一些坑
1、接口错误的时候,大量重复请求。
可能接口错误时vant3内部某些变量没重置,导致一直重复请求,解决方法是接口返回不成功finished设置成true
2、没有发起请求
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="getData"
offset="50"
v-if="!list || (list && list.length)"
>
<item v-for="info in list" :key="info.id" :info="info" />
</van-list>
<script setup>
function getData(){
if(loading.value || finished.value){
return
}
// 接口请求....
}
</script>
有人可能跟我一样,习惯在数据请求方法中判断loading, vant 内部会对loading进行赋值,导致在调用方法前,loading为true,导致发不起请求。
处理vant list使用报错的点
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()函数里。
4、还有就是在我们刚进入页面时,就触发了一次onLoad事件,第二页的数据也显示出来了,
我的原因是,在进入页面时,我在created中也调用了一次求遍历数据的值,所以我进入时,相当于created调用了一次,在onLoad中又调用了一次。数据就加载显现到了第二页。
对于其各个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事件
一些关于 Vant3 的更多细节:
-
TypeScript 支持:Vant3 是使用 TypeScript 构建的,它添加了类型检查和其他功能,可以更轻松地捕获错误并编写更易于维护的代码。
-
更好的性能:Vant3 针对更好的性能进行了优化,这意味着更快的加载时间、更流畅的动画和更好的整体用户体验。
-
改进的可访问性:Vant3 组件在构建时考虑了可访问性,这使得创建可供残障人士使用的应用程序变得更加容易。
-
更好的国际化:Vant3 组件支持国际化,这意味着可以轻松构建支持多种语言的应用程序。
-
更可定制:Vant3 为其组件提供了广泛的定制选项,这意味着可以轻松调整应用程序的外观以匹配您的品牌。
-
升级组件:Vant3 有新的和升级的组件,如网格、粘性、滑动器等。
-
更好的 API 设计:Vant3 API 设计更加一致,更易于使用和理解。
-
更灵活:Vant3 具有更灵活的模块化结构,可以轻松导入和使用您需要的特定组件,而无需加载不必要的代码。
总的来说,Vant3 是一个功能强大且灵活的 UI 工具包,可以使用 Vue.js 轻松构建高质量的交互式移动应用程序。添加的功能和性能优化使其成为想要创建快速、响应迅速且易于访问的应用程序的开发人员的绝佳选择。