vant ui 上拉加载分页及tab切换遇到的坑

完整代码：

<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切换要将这两个值重置，不然会造成数据重复