借助vant完后下拉刷新出来新数据
这是vant官网的list 列表
https://youzan.github.io/vant/#/zh-CN/list
直接上代码
<template>
<div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<ul>
<li v-for="(e,i) in list" :key="i">
<img v-lazy="e.img" alt="">
<p>{{e.t1}}</p>
<p>{{e.t2}} {{e.t3}}</p>
<p>{{e.t4}}</p>
</li>
</ul>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
list: [],
loading: false,
finished: false,
refreshing: false,
page:0,
number:10,
all:""
};
},
mounted()
{
axios.get("/static/data.json").then((res)=>{
this.all=res.data.list.length
this.list=res.data.list.slice(this.page,this.number)
})
},
methods: {
onLoad() {
setTimeout(() => {
if (this.refreshing) {
//这是下拉刷新新数据
this.page=this.page+10;
this.number=this.number+10;
axios.get("/static/data.json").then((res)=>{
var data = res.data.list.slice(this.page,this.number)
data.forEach((e)=>{
this.list.unshift(e)
})
})
this.refreshing = false;
}
//这里面可以写滚动到底部加载更多数据
// for (let i = 0; i < 10; i++) {
// this.list.push(this.list.length + 1);
// }
this.loading = false;
if (this.list.length >= this.all) {
this.finished = true;
}
}, 3000);
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.onLoad();
}
}
}
</script>
<style lang="scss" scoped>
ul{
width: 100%;
display: flex;
flex-wrap: wrap;
li{
width: 50%;
}
}
</style>