vue项目的问题--tab切换上拉加载

最近在写vue的项目，遇到的问题总结：

loading为false是加载中，finished为true是已结束状态，onLoad是执行函数（分页添加list的值）

初始化loading为false,finished为false。

加载的list，页面上有个切换的tab,实现切换不一样的类型，加载不一样的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，若是列表已经加载完毕再去切换，onload就能够实现自动触发。

 

        <van-tabs v-model="active" sticky @click="changeAct">
            <van-tab v-for="(item,ind) in navtitle" :title="item" :key="ind">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(page,keyword,orderColumn)">
                        <IndexTemp v-for="(item,i) in goodList" :good="item" :key="i"></IndexTemp>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>

在切换tab后执行初始化函数

 

            //切换tab
            changeAct(index, title) {
                this.active = index;
                this.orderColumn = title == '价格' ? 'price' : title == '上新' ? 'time' : 'default';
                if(this.orderColumn == 'price') {
                    this.orderTypeCut = !this.orderTypeCut;
                }
                this.orderType = this.orderTypeCut ? 'desc' : 'asc';
                this.page = 1;
                this.goodList = [];
                this.loading = true;
                this.finished = false;
                if(this.loading){
                    this.onLoad(this.page, this.keyword, this.orderColumn);
                }
            },

            onLoad(page, keyword, orderColumn) {
                this.pageload=true;
                var self = this;
                var url = this.util.head_host + 'goods/list';
                var params = new FormData();
                params.append('client_id', this.util.client_id);
                params.append('timestamp', this.util.timestamp);
                params.append('sign', this.util.sign);
                params.append('page', page);
                params.append('keyword', keyword);
                params.append('orderColumn', orderColumn);
                if(orderColumn == 'price') {
                    params.append('orderType', this.orderType);
                }
                this.$api({
                    method: 'POST',
                    url: url,
                    data: params,
                    headers: {
                        'token': self.util.access_token
                    },
                }).then(function(res) {
                    if(res.data.code == 0) {
                        //console.log(res.data)
                        if(res.data.data.length > 0) {
                            self.goodList = self.goodList.concat(res.data.data);
                        }
                        self.lastPage = res.data.nextPage;
                        self.page = self.lastPage;
                        // 加载状态结束
                        self.loading = false;
                        // 数据所有加载完成
                        if(self.lastPage == 0) {
                            self.finished = true;
                        }
                    } else if(res.data.code == 401) {
                        self.callJsFunction;
                        self.onLoad(self.page, self.keyword, self.orderColumn)
                    }
                    self.pageload=false;

                }).catch(function() {
                })
            },

在第一次onload的过程当中将loading设置为false，则触发第二次loading，当执行到知足结束条件的时候，finished为true,结束加载。