在做移动端的页面,难免会遇到列表的懒加载,下面是使用Vue和vant实现的List组件懒加载功能,但是根据每个人传递的参数不同可能方法也会不同,仅供大家参考。
<template>
<div class="message-list-info">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getMessageList" >
<van-swipe-cell v-for="item in messageList" :key="item.InfoID">
<van-cell class="cell" is-link>
<template #title>
<van-tag class="custom-tag">已读</van-tag>
<div class="custom-title" @click="toDetail(item.InfoID,item.SendId)">{{item.MessageContent}}</div>
</template>
</van-cell>
<template #right>
<van-button square type="danger" text="删除" />
</template>
</van-swipe-cell>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import {List,PullRefresh,NoticeBar,Swipe,SwipeItem,Lazyload,SwipeCell,Card,Tag,Cell,Button } from 'vant';
// import {mapState,mapActions,mapGetters} from 'vuex';
export default{
data(){
return{
messageList: [],
loading: false,
finished: false,
refreshing: true,
datatotal:0, //数据总数
curpage:0, //当前页数
perpagecount:20, //每页条数
}
},
components:{
[List.name]:List,
[PullRefresh.name]:PullRefresh,
[NoticeBar.name]:NoticeBar,
[Swipe.name]:Swipe,
[SwipeItem.name]:SwipeItem,
[Lazyload.name]:Lazyload,
[SwipeCell.name]:SwipeCell,
[Card.name]:Card,
[Tag.name]:Tag,
[Cell.name]:Cell,
[Button .name]:Button
},
computed:{
},
methods:{
getMessageList(num){
if (this.refreshing) {
this.messageList = [];
this.refreshing = false;
}
let paramsObj={
status:"MessageInfo",
userid:5,
curpage:this.curpage, //当前页数
perPageCount:this.perpagecount, //每页消息数目
}
this.$axios.get('http://localhost:3000/server',paramsObj).then((data)=>{
console.log(JSON.stringify(data));
this.total=data.count;
this.messageList.push(...data.list);
this.curpage++;
//判断消息是否加载完毕
this.loading = false;
if (this.messageList.length >= this.total) {
this.finished = true;
}
});
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.curpage=0;
// console.log("onRefresh:"+this.curpage);
this.getMessageList();
},
toDetail(){
this.$router.push({
path:'/message/detail'
})
}
}
}
</script>
<style scoped>
.mesage-cell{
height:40px;
/* line-height:40px; */
margin-bottom:1px;
padding-left: 6px;
background-color: #fff;
}
.message-list-info{
padding-bottom: 50px;
}
.cell{
width:100vw;
height:40px;
overflow: hidden;
}
.custom-tag{
position: relative;
top:-2px;
left:0
}
.custom-title{
position: relative;
top:-26px;
left:40px;
width:77vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
若有疑问欢迎大家评价