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,結束加載。