vant-list onLoad触发问题以及tab切换

@wcx

已于 2023-12-12 11:35:10 修改

阅读量760

点赞数 10

文章标签： vue.js 前端框架

于 2023-12-12 11:18:24 首次发布

本文链接：https://blog.csdn.net/weixin_57545032/article/details/134944602

版权

<van-tabs v-model="activeName" @click="onClick" title-active-color="#06cdb9ed" color="#06cdb9ed">
    <van-tab title="兑换记录" name="兑换记录">
        <van-list v-model="loadingExchange" :finished="finishedExchange" finished-text="没有更多了" @load="onLoadExchange">
            <van-cell v-for="item, index in exchangeList" :key="index">
                <template #default>
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <van-icon style="margin-right: 10px;" color="#06cdb9ed" name="points" />
                        <div class="center">
                            <div>{{ item.goodsId }}</div>
                            <div class="center-bottom">
                                <span>{{ item.createTime }}</span>
                            </div>
                        </div>
                        <span class="num">{{ item.standardKcl }}</span>
                    </div>
                </template>
            </van-cell>
        </van-list>
    </van-tab>
    <van-tab title="获取历史" name="获取历史">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item, index in historyList" :key="index">
                <template #default>
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <van-icon style="margin-right: 10px;" color="#06cdb9ed" name="points" />
                        <div class="center">
                            <div>{{ item.nickName }}</div>
                            <div class="center-bottom">
                                <span>{{ item.year }}年</span>
                                <span class="center-bottom2">{{ item.week }}周</span>
                                <span class="center-bottom3">{{ item.updateTime }}</span>
                            </div>
                        </div>
                        <span class="num">{{ item.standardKcl }}</span>
                    </div>
                </template>
            </van-cell>
        </van-list>
    </van-tab>
</van-tabs>

queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId: this.$store.getters.userId
},
total: 0,
historyList: [],
loading: true,
finished: false,

 onClick(name, title) {
            if (name == '兑换记录') {
                this.exchangeList = []
                this.queryExchangeParams.pageNum = 1
                this.loadingExchange = true
                this.finishedExchange = false
                this.getExchangeList();
            } else {
                this.historyList = []
                this.queryParams.pageNum = 1
                this.loading = true
                this.finished = false
                this.getHistoryList();
            }
        },

  getHistoryList() {
            listHistory(this.queryParams).then(response => {
                this.total = response.total;
                response.rows.forEach((item, index) => {
                    this.historyList.push(item) // 数据追加
                })
                this.loading = false;
                if (this.historyList.length < this.total) {
                    this.finished = false; // 数据未加载完  
                } else {
                    this.finished = true; // 数据加载完  
                }
            });
        },

 onLoad() {
            this.queryParams.pageNum++
            this.getHistoryList()
        },