布局：
<template>
<div class="hello">
<van-nav-bar
title="好友"
fixed
/>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
>
<img :src="item.avatar" alt="">
<p>{{item.user_name}}</p>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</template>
js：
<script>
import axios from "axios"
export default {
data() {
return {
count: 0,
isLoading: false,
list: [],
loading: false,
finished: false
}
},
methods: {
onRefresh() {
setTimeout(() => {
this.$toast('刷新成功');
this.isLoading = false;
this.count++;
}, 500);
},
onLoad() {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 异步更新数据
setTimeout(() => {
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= (this.list.length-1)) {
this.finished = true;
}
}, 500);
},
},
created(){
axios.get('http://api.baxiaobu.com/index.php/home/v1/getuserlist').then((res)=>{
console.log(res.data.userList)
this.list=res.data.userList
})
}
}
</script>