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

 更新时间:2023年01月18日 10:11:10   作者:Delete_89x  
这篇文章主要介绍了vant-List-@load事件一直触发的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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如何调用接口请求头增加参数

    Vue如何调用接口请求头增加参数

    这篇文章主要介绍了Vue如何调用接口请求头增加参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue2项目中对百度地图的封装使用详解

    Vue2项目中对百度地图的封装使用详解

    近期项目需求相关地图限定使用百度地图,功能比较简单,下面这篇文章主要给大家介绍了关于Vue2项目中对百度地图的封装使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue父组件异步传递props值,子组件接收不到解决方案

    vue父组件异步传递props值,子组件接收不到解决方案

    这篇文章主要介绍了vue父组件异步传递props值,子组件接收不到解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • ant design vue动态循环生成表单以及自定义校验规则详解

    ant design vue动态循环生成表单以及自定义校验规则详解

    这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue页面加载时的进度条功能(实例代码)

    vue页面加载时的进度条功能(实例代码)

    这篇文章主要介绍了vue页面加载时的进度条功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 利用Vue v-model实现一个自定义的表单组件

    利用Vue v-model实现一个自定义的表单组件

    本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Vue 项目部署到服务器的问题解决方法

    Vue 项目部署到服务器的问题解决方法

    本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue组件通信传递数据的三种方式

    Vue组件通信传递数据的三种方式

    这篇文章主要介绍了Vue组件通信传递数据的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04
  • vue项目如何实现ip和localhost同时访问

    vue项目如何实现ip和localhost同时访问

    这篇文章主要介绍了vue项目如何实现ip和localhost同时访问,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue2.0/3.0双向数据绑定的实现原理详解

    Vue2.0/3.0双向数据绑定的实现原理详解

    这篇文章主要给大家介绍了关于Vue2.0/3.0双向数据绑定的实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论