完整代码:
<div id="app" class="mapList">
<van-tabs v-model="activeTab" @change="activeChange">
<van-tab title="全部" name="0"></van-tab>
<van-tab :title="i.name" :name="i.id" v-for="(i, index) in tabList" :key="index"></van-tab>
</van-tabs>
<ul>
<van-list
v-model="loading"
:finished="finished"
:finished-text="bottomText"
:immediate-check="false"
@load="onload"
>
<li class="list_li" v-for="(i,index) in avtiveList" :key="index">
<div @click="jumpToDetail(i.id)" class="clearfix">
<div class="list_img">
<img :src="`/static/index/images/${i.img_url}`">
</div>
<div class="list_text">
<p style="color:#fa6b01">名称:{{i.name}}</p>
<p v-if="i.tel !== '' "><span>电话:</span>{{i.tel}}</p>
<p class="cont"><span>地址:</span>{{i.address}}</p>
</div>
</div>
</li>
</van-list>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
template: ``,
data() {
return {
avtiveList:[],
activeTab:0,
tabList:[],
currentPage: 1, // 当前页码
pageSize: 10, // 每页个数
loading: false, // 加载下一页
finished: true, // 是否加载完了
totalSize:20,
bottomText:'',
}
},
mounted(){
this.getType()
},
methods: {
activeChange(v){
this.activeTab = v
this.currentPage = 1
this.avtiveList = []
document.documentElement.scrollTop = 0
this.getList()
},
getType(){
axios({
method:'get',
url:`/site/typeList`,
}).then(res => {
const {list} = res.data.data
this.tabList = list
this.activeTab = list[0].name
})
},
onload(){
this.getList()
},
getList(){
this.loading = true
axios({
method:'get',
url:this.activeTab?`/site/list_page?type_id=${this.activeTab}&page_size=${this.pageSize}&page=${this.currentPage}`:`/site/list_page`,
}).then(res => {
this.loading = false
const {list,total,current_page} = res.data.data
this.avtiveList = this.avtiveList.concat(list)
this.totalSize = total
this.currentPage += 1
if (this.avtiveList.length >= this.totalSize) {
this.bottomText = '没有更多了'
this.finished = true
this.currentPage = 1
}else {
this.finished = false
}
})
},
jumpToDetail(id){
window.location.href =`/site/detail?id=${id}`
},
}
});
</script>
重点说明:
1、loading 是否处于加载状态,加载过程中不触发 load 事件
2、finished 是否已加载完成,加载完成后不再触发 load 事件
3、 :immediate-check=“false” 初次加载防止连续调用两次分页接口
4、document.documentElement.scrollTop = 0 tab列表切换是要将滚动条距顶部距离设置为0,不然前一个列表加载到第几页,切换tab时会自动重复多次调用接口直到前面列表的页码。
5、this.currentPage = 1; this.avtiveList = [] tab切换要将这两个值重置,不然会造成数据重复