<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="-- 暂无更多数据 --"
@load="onLoad"
:error.sync="error"
error-text="请求失败,点击重新加载"
class="list">
<ul>
<li v-for="(item,index) in list" :key="index" @click="to_game(item)">
{{item}}
</li>
</ul>
</van-list>
</van-pull-refresh>
<script>
export default{
data() {
return {
loading: true, // 是否处于加载状态
finished: false, // 是否已加载完成
error: false, //是否加载失败
refreshing: false, // 是否处于加载中状态
pageNum: 0,
list: [], //列表数据
}
},
methods:{
// 上拉列表加载更多
// 基础用法:List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。
onLoad() {
this.loading = true;
if (this.pageNum == 0) {
this.list = [];
}
this.pageNum++;
this.axios.post("/api/game/index", {
page: this.pageNum,
group_id: this.tabShow,
}).then(res => {
if (res.status == 1) {
// 数据小于10条,已全部加载完毕finished设置为true
if (res.data.list < 10) {
this.finished = true;
}
//没有数据
if (res.data.list.length == 0) {
this.loading = false;
this.finished = false;
}
this.list = this.list.concat(res.data.list);
// 加载状态结束
this.loading = false;
} else {
this.$toast(res.msg);
}
}).catch(() => {
this.error = true;
})
},
//下拉刷新触发
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.onLoad();//加载
},
}
}
</script>
List 列表配合PullRefresh 实现:下拉刷新,上拉加载更多
猜你喜欢
转载自blog.csdn.net/qq_40745143/article/details/104768876
今日推荐
周排行