vant中list列表组件使⽤（附详细注释）vant中list列表组件使⽤
梅婷 周滨
html:
<van-list
v-model="loading"                          // 是否显⽰正在加载状态
:finished="finished"        // 是否已经加载完成
finished-text="没有更多了"      // 加载完成提⽰⽂案
@load="onLoad"          // 滚动条与底部距离offset时触发事件
offset="300"          // 滚动条与底部距离offset时触发@load(默认300)
:error.sync="error"        // 是否显⽰加载失败状态释小龙助理
error-text="请求失败，点击重新加载"      // 加载失败提⽰⽂案
>
/
/ 循环列表数据
2020入伏和出伏时间<div v-for='(item, index) in list' :key="index">
<div>{{item}}循环出来的数据<div>
</div>
</van-list>
js:
data声明:
data(){
return{
loading:false,// 是否处在加载状态
finished:false,// 是否已加载完成
error:false,// 是否加载失败
list:[],// 列表
page:1,// 分页
page_size:10// 每页条数
total:0// 数据总条数
}
}
平野绫事件methods定义⽅法:
秦汉擂methods:{
// 获取列表数据⽅法
async getList(){
let{ data: res }=await informList({
page:this.page,
page_size:this.page_size,
})
if(res.length ===0){// 判断获取数据条数若等于0
this.list =[];// 清空数组
this.finished =true;// 停⽌加载
}
// 若数据条数不等于0
this.list.push(...res.list)// 将数据放⼊list中
this.loading =false;// 加载状态结束
// 如果list长度⼤于等于总数据条数，数据全部加载完成
if(this.list.length >= al){
this.finished =true;// 结束加载状态
}
},
// 被 @load调⽤的⽅法
onLoad(){// 若加载条到了底部
let timer =setTimeout(()=>{// 定时器仅针对本地数据渲染动画效果，项⽬中axios请求不需要定时器List();// 调⽤上⾯⽅法，请求数据
this.page++;// 分页数加⼀
this.finished &&clearTimeout(timer);//清除计时器
},100);
},
// 加载失败调⽤⽅法
onRefresh(){
this.finished =false;// 清空列表数据
this.loading =true;// 将 loading 设置为 true，表⽰处于加载状态
this.page =1;// 分页数赋值为1
this.list =[];// 清空数组
}
}
董思阳
ok,vant中的list组件简单使⽤完成.