美文网首页
vant list 请求多次

vant list 请求多次

作者: 懿小诺 | 来源:发表于2021-11-09 16:22 被阅读0次

    这个问题之前遇到过多次了 一直改改就行了 具体什么原因没查过 也没总结过。。。
    首先,考虑 进列表请求多次是什么原因:

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

    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>
    </van-list>
    
    • loading变量赋值问题

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

              onLoad() {
                    this.loading = true; //重点 vant官网只告诉了请求接口后赋值为false 却没说这里要改为true
                    this.getNotice() // 请求函数
                    this.pageNum += 1;  // 请求页数+1
                
                },
    

    相关文章

      网友评论

          本文标题:vant list 请求多次

          本文链接:https://www.haomeiwen.com/subject/agzmzltx.html