vant中List组件中load事件触发多次问题

是否设置的加载数据不够占满屏幕

List中的数据不够占满屏幕则会触发load事件,产生重复加载现象。可以将一次加载的数据量增大来解决此问题。

父级容器是否出现overflow:scroll的属性,去掉即可。
       如果在 html 和 body 标签上设置了overflow-x: hidden样式,会导致 List 一直触发加载。这个问题的原因是当元素设置了overflow-x: hidden样式时,该元素的overflow-y会被浏览器设置为auto,而不是默认值visible,导致 List 无法正确地判断滚动容器。解决方法是去除该样式,或者在 html 和 body 标签上添加height: 100%样式。

是否使用了float布局

        若 List 的内容使用了 float 布局,可以在容器上添加van-clearfix类名来清除浮动,使得 List 能正确判断元素位置

<van-list>
  <div class="van-clearfix">
    <div class="float-item" />
    <div class="float-item" />
    <div class="float-item" />
  </div>
</van-list>


loading变量赋值问题,排除了前面三种问题后,仍然无法解决,还是会多次触发load事件。可以考虑是否是loading变量赋值的问题,首先进入load事件直接给loading赋值为true,然后在ajax后获取成功后将loading赋值为false。最后在数据全部加载完成后将finished设置为true,即可。

onLoad() {
                this.loading = true;
                this.pageNum += 1;  // 请求页数+1
                this.getNotice() // 请求函数
                // 在函数获取成功后设置   this.loading = false;
                if (this.listLength === 0) { // 结束加载情况判断
                    this.finished = true
                }
            }

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果vue3 vant list 组件触发上拉载和onLoad事件,可能是以下原因: 1. 没有设置List组件的高度属性。 在List组件,必须设置height属性,否则无法触发上拉载功能。你可以设置一个固定的高度或者一个动态计算的高度,例如: ``` <van-list :height="500" @load="onLoad"></van-list> ``` 2. 没有设置List组件loading属性。 loading属性是用来控制上拉载的状态的,如果没有设置loading属性,上拉载功能将无法正常工作。你可以在setup定义一个ref变量来控制loading属性,例如: ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 3. 没有在List组件上绑定@load事件。 上拉载的触发需要依赖@load事件,如果没有在List组件上绑定该事件,上拉载功能将无法正常工作。你可以在List组件上绑定一个方法,例如: ``` <template> <van-list :height="500" :loading="loading" @load="onLoad"></van-list> </template> <script> import { ref } from 'vue'; export default { setup() { const loading = ref(false); const onLoad = () => { loading.value = true; // ... }; return { loading, onLoad, }; }, }; </script> ``` 如果以上方法都没有解决问题,你可以尝试检查控制台输出,查看是否有相关的错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值