首先 van-list 是首次进就会触发加载的,滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置
<template> <div class="listClass" ref="listout"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div v-for="(item, index) in list" :key="index">{{item}}</div> </van-list> </div> </template> <script> export default { data() { return { // 初始化定义 loading: true, finished: false, searchData: { pageSize: 10, pageNo: 0 }, list: [] } }, methods: { onLoad(){ this.searchData.pageNo += 1 this.obtainList() }, // 列表 obtainList () { // 调用列表接口(此为演示) findList(this.searchData).then(res => { if (res.data.data && res.data.errcode == 0) { if(this.searchData.pageNo == 1){ this.list = [] } res.data.data.result.forEach((v) => { this.list.push(v) }) this.loading = false if(this.searchData.pageNo >= res.data.data.totalPage) { this.finished = true } } }) } } } </script> <style scoped> .listClass { width: 100%; height: 100vh; overflow-y: auto; } </style>tab 切换的时候 需要重置下loading和finished状态
// 切换 activeClick (type) { this.searchData.active = type this.searchData.pageNo = 0 this.$refs.listout.scrollTop = 0 this.loading = true this.finished = false this.onLoad() }
版权声明:本文为qq_41169990原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。