vant-List-@load事件一直触发的解决

目录

• vant-List-@load事件一直触发
• 项目场景
• 问题描述
• 原因分析
• 解决方案
• vant-list onLoad触发以及tab切换不再触发问题
• 总结

vant-List-@load事件一直触发

项目场景

今天项目用到vant-List，发现一直触发@load事件。

这是请求的page和pageSize

page: 0,pageSize: 10,

后端测试数据一共21条，但是进入页面就一下请求了三次，全部加载完数据了，这样就达不到要求了。

问题描述

查看了文档底下的常见问题：

为什么会连续触发 load 事件？

如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。

看到这个时候我查看了一下代码，10条的数据量是能够填满一屏的，但是还是直接请求完成了。

往下走：

在 htML、body 上设置 overflow 后一直触发加载？

如果在 html 和 body 标签上设置了overflow-x: hidden样式，会导致 List 一直触发加载。

html,body {
    overflow-x: hidden;
}
    

这个问题的原因是当元素设置了overflow-x: hidden样式时，该元素的overflow-y会被浏览器设置为auto，而不是默认值visible，导致 List 无法正确地判断滚动容器。

解决方法是去除该样式，或者在 html 和 body 标签上添加height: 100%样式。

原因分析

到这里就找到问题的原因了，我习惯在外层盒子加上min-height: 100vh; overflow-x:hidden; 没想到会影响这个组件，麻了。

解决方案

去除overflow-x: hidden; 或将min-height: 100vh; 改为height: 100vh;

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()    }
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
• vant-ui框架的一个bug(解决切换后onload不触发)
• vant中list的使用以及首次加载触发两次解决问题

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！