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

首先 van-list 是首次进就会触发加载的,滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置

<template>
    <div class="listClass" ref="listout">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in list" :key="index">{{item}}</div>
        </van-list>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 初始化定义
            loading: true,
            finished: false,
            searchData: {
                pageSize: 10,
                pageNo: 0
            },
            list: []
        }
    },
    methods: {
        onLoad(){
            this.searchData.pageNo += 1
            this.obtainList()
        },
        // 列表
        obtainList () {
            // 调用列表接口(此为演示)
            findList(this.searchData).then(res => {
                if (res.data.data && res.data.errcode == 0) {
                    if(this.searchData.pageNo == 1){
                        this.list = []
                    }
                    res.data.data.result.forEach((v) => {
                        this.list.push(v)
                    })
                    this.loading = false
                    if(this.searchData.pageNo >= res.data.data.totalPage) {
                        this.finished = true
                    }
                }
            })
        }
    }
}
</script>
<style scoped>
.listClass {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
}
</style>

tab 切换的时候 需要重置下loading和finished状态

    // 切换
    activeClick (type) {
      this.searchData.active = type
      this.searchData.pageNo = 0
      this.$refs.listout.scrollTop = 0
      this.loading = true
      this.finished = false
      this.onLoad()
    }


版权声明:本文为qq_41169990原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。