van-list使用,vant组件有table表格吗
本文主要介绍了使用Vant框架的list组件遇到的坑和解决方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
利用Vant框架的list组件的坑引入特性，来说说使用list组件遇到的坑。使用vant中van-list的原代码。
使用Vant框架list组件的坑
介绍
Vant是一个面向前端团队的开源移动组件库。2017年开源，维护了4年。
Vant是业界主流的移动组件库之一，对内承载了优赞的所有核心服务，对外服务超过10万开发者。
特性
它提供了60多个优质组件，以优异的性能覆盖了移动终端上的各种场景。组件的平均体积小于1kb(min gzip)的单元测试覆盖率的90%。它提供中英文文档和示例，具有完善的稳定性保证。Vue 2 Vue 3支持点播介绍、主题定制、国际化、打字稿、SSR快速配置、具体介绍。请查阅官方文件。Vant框架已经在Github上被赞了，还是很好用的。强烈推荐。
聊一下使用list组件遇到的坑
官方文档的示例代码如下：
货车清单
v-model=正在加载
:已完成=“已完成”
已完成-text=没有更多的
@load=onLoad
van-cell v-for=列表中的项目:key=item :title=item /
/van-list
导出默认值{
data() {
返回{
列表：[]，
加载：假，
完：假的，
};
},
方法：{
onLoad() {
//异步更新数据
//setTimeout只是一个例子，ajax请求一般用在真实场景中。
setTimeout(()={
for(设I=0；i 10i ) {
this . list . push(this . list . length 1)；
}
//加载状态结束
this.loading=false
//加载所有数据。
if (this.list.length=40) {
this.finished=true
}
}, 1000);
},
},
};
效果图：
但是！你复制代码，找到了，发现完全没用！这个定时任务我看不懂，抄底也没什么逻辑。经过几个小时的研究，发现问题其实是CSS！是的，你没听错！是CSS！
代码下面，重点是css和JS。记住不要删除settimeout，也不要相信他的评论。把业务写在settimeout里就行了。
解释一下这个css的意思，就是van-list需要为他定义一个高度，对于滚动是自适应的，这样在高度未满或者滚动见底的情况下就可以完美触发加载时间。这里还有一个重点！即使是van-list的父代也要定义高度，否则不行！
至于业务，必须写在settimeout里面才有效。懂的大老板可以帮忙解释一下，但是不太懂。
div class= txtc style= height:100%；位置：固定；宽度：100%
van-list style= height:100%；宽度：100%； overflow-y:auto；
v-model=正在加载
:已完成=“已完成”
已完成-text=没有更多的
@load=onLoad
div class= divinfo v-for= table data中的项:key=item.sid/div
/van-list
/div
vant中van-list的使用
van-list中的元素不能有float样式，否则会连续触发load事件。
原代码
模板
div class="关于"
van-tabs v-model= active sticky @ change= getTypeDate
van-tab v-for=(tab)in typeList :title= tab . name :key= tab . id
div:style= { height:content height } class= pic-content
货车清单
:已完成=“已完成”
:finished-text=finishedText
v-model=正在加载
:偏移量=10
:immediate-check=false
@load=getserviceList
！-修改前代码-修改前的代码
/*div
pic-box
v-for=(serve) in serviceList
:key=serve.id
@click=路由器(服务)
pic-item
图片
v-if=serve.picturePath
:src= $ BASE _ PICTUREPATH _ URL serve。PICTUREPATH。split(，)[0]
/div
p{{serve.name}}/p
服务。价格} }/p
/div*/
！-修改前代码-
/van-list
/div
/van-tab
/van-tab
/div
/模板
脚本
从"万特"导入{选项卡，标签，列表，单元格，行，列}。
从导入{ FetchServeType，FetchServeList }./API/serve。js’；
导出默认值{
data() {
返回{
活动：0,
类型列表：[],
服务列表：[],
类型： ,
已完成文本： ,
完：假的，
pageNum: 1，
页面大小：10,
内容高度：0,
加载：假
};
},
已安装(){
这个。getorderstyle()；
这个。内容高度=文档。documentelement。客户身高-66-40 像素；
},
方法：{
异步getOrderStyle() {
let RES=await FetchServeType()；
if (res.data res.data.success) {
这个。类型list=RES . data。数据；
this.type=res.data.data[0].姓名；
这个。gettypedate()；
}
},
getTypeDate() {
这个。pagenum=1；
这个。type=this。类型列表[this。活动].姓名；
这个。服务列表=[]；
这个。已完成文本=" "；
this.finished=false
这个。getservicelist()；
},
异步获取服务列表(){
让干杯=这个. toast.loading({
面具：真的，
消息： 加载中.
});
const { type，pageNum，pageSize }=this
让params={
类型，
pageNum，
页面大小
};
let RES=await FetchServeList(params)；
this.loading=false
吐司。close()；
if (res.data res.data.success) {
let list=(RES . data。数据资源数据。数据。list) []；
if (pageNum 1) {
this.serviceList=[.this.serviceList，列表];
}否则{
this.serviceList=list
}
//如果当前页数=总页数，则已经没有数据
if(参考数据。数据。pagenum===RES . data。数据。页数){
this.finished=true
this.finishedText=-没有更多了-;
}
//如果总页数大于当前页码，页码一
if(参考数据。数据。页数pageNum){
this.pageNum
}
}
console.log(FetchServeList:，this。服务列表)；
}
}
};
/脚本
样式lang=scss 范围。图片-内容{
溢出-y:滚动；
-网络工具包-溢出-滚动：触摸；图片框{
/****************************修改前代码***************************/
背景色：# fff
溢出：隐藏；
内破：避免；
框大小：边框-框；
边距-底部：0.7雷姆；
填充：0.8雷姆；
宽度：48%;
身高：16雷姆；
~ ~浮动：左；~~ /**************不能有漂浮物样式*************/
保证金：1%;
边框-半径：4px
/****************************修改前代码***************************/
p:第n种类型(1) {
填充：0.8雷姆0；
}
p:第n种类型(2) {
颜色：红色；
}。图片-项目{
身高：11雷姆；
伸缩方向：列；
对齐-内容：居中；
溢出：隐藏；
img {
宽度：100%;
高度：自动；
边框-半径：4px
}
}
}
}
/风格
//修改后代码（注释部分为修改后代码)
模板
div class="关于"
van-tabs v-model= active sticky @ change= getTypeDate
typeList中的van-tab v-for=(tab):title= tab。 name :key= tab。id
div:style= { height:content height } class= pic-content
货车清单
：已完成="已完成"
:finished-text=finishedText
v-model=正在加载
：偏移量=10
:immediate-check=false
@load=getserviceList
！-修改后代码-
/*van-row
范科尔
span=12
pic盒
v-for=(serve) in serviceList
:key=serve.id
@click=路由器（服务)
图片-项目
图片
v-if=serve.picturePath
:src= $ BASE _ PICTUREPATH _ URL serve。PICTUREPATH。split(，)[0]
/div
p{{serve.name}}/p
服务。价格} }/p
/范-科尔
/van-row*/
！-修改后代码-
/van-list
/div
/van-tab
/van-tab
/div
/模板
脚本
从"万特"导入{选项卡，标签，列表，单元格，行，列}。
从导入{ FetchServeType，FetchServeList }./API/serve。js’；
导出默认值{
data() {
返回{
活动：0,
类型列表：[],
服务列表：[],
类型： ,
已完成文本： ,
完：假的，
pageNum: 1，
页面大小：10,
内容高度：0,
加载：假
};
},
已安装(){
这个。getorderstyle()；
这个。内容高度=文档。documentelement。客户身高-66-40 像素；
},
方法：{
异步getOrderStyle() {
let RES=await FetchServeType()；
if (res.data res.data.success) {
这个。类型list=RES . data。数据；
this.type=res.data.data[0].姓名；
这个。gettypedate()；
}
},
getTypeDate() {
这个。pagenum=1；
这个。type=this。类型列表[this。活动].姓名；
这个。服务列表=[]；
这个。已完成文本=" "；
this.finished=false
这个。getservicelist()；
},
异步获取服务列表(){
让干杯=这个. toast.loading({
面具：真的，
消息： 加载中.
});
const { type，pageNum，pageSize }=this
让params={
类型，
pageNum，
页面大小
};
let RES=await FetchServeList(params)；
this.loading=false
吐司。close()；
if (res.data res.data.success) {
let list=(RES . data。数据资源数据。数据。list) []；
if (pageNum 1) {
this.serviceList=[.this.serviceList，列表];
}否则{
this.serviceList=list
}
//如果当前页数=总页数，则已经没有数据
if(参考数据。数据。pagenum===RES . data。数据。页数){
this.finished=true
this.finishedText=-没有更多了-;
}
//如果总页数大于当前页码，页码一
if(参考数据。数据。页数pageNum){
this.pageNum
}
}
console.log(FetchServeList:，this。服务列表)；
}
}
};
/脚本
样式lang=scss 范围。图片-内容{
溢出-y:滚动；
-网络工具包-溢出-滚动：触摸；图片框{
/************************ 修改后代码**************************/
背景色：# fff
溢出：隐藏；
框大小：边框-框；
边距-底部：0.7雷姆；
填充：0.8雷姆；
身高：16雷姆；
边框-半径：4px
/************************ 修改后代码************************ **/
p:第n种类型(1) {
填充：0.8雷姆0；
}
p:第n种类型(2) {
颜色：红色；
}。图片-项目{
身高：11雷姆；
伸缩方向：列；
对齐-内容：居中；
溢出：隐藏；
img {
宽度：100%;
高度：自动；
边框-半径：4px
}
}
}
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。