HTML
<van-list v-model="vanListLoading" :finished="finished" :finished-text="finishedText" @load="vanList_more">
<li v-for="(item,index) of list" :key="index">
{{ index }}{{ item.name }}
</li>
</van-list>
js
<script>
import { nameList } from '../../../api/api' //接口
export default {
data() {
return {
list: [],
vanListLoading: false, // 加载状态
finished: false, // 是否加载
finishedText: '',
pages: 0, // 页数
pnums: 10 // 条数
}
},
methods: {
vanList_more: function() {
this.pages += 1 // 页数+1
this.getList()
},
getList() {
const db = {
pages: this.pages,
pnums: this.pnums
}
this.$post(nameList, db).then(res => {
this.finishedText = ''
if (res.code === 1) {
this.vanListLoading = false
if (res.data.length > 0) {
this.list = this.list.concat(res.data) // 追加数据
this.finished = false
}
// 如果当前页数 = 总页数，则已经没有数据
if (this.pages === Math.ceil(res.count / this.pnums)) {
this.finished = true
this.finishedText = '- 没有更多了-'
}
} else {
this.finished = true
this.finishedText = '- 没有更多了-'
}
})
}
}
}
</script>
