列表项按需加载 v-infinite-scroll 滚动条触底无效解决方案

最新推荐文章于 2025-06-03 16:56:04 发布

玛卡巴卡半夜不睡觉

最新推荐文章于 2025-06-03 16:56:04 发布

阅读量1.7k

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_70547044/article/details/135701486

版权

文章讲述了在使用ElementUI的v-infinite-scroll指令实现分页滚动加载时，遇到在特定分辨率下无法触发加载方法的问题，解决方案是调整infinite-scroll-distance属性为大于0的数值，如1或其他合适值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台返回的分页数据需要实现滚动条触底加载下一页，用了element-ui 的 v-infinite-scroll 指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。

解决方法

在同一标签内将 infinite-scroll-distance 设置为 1 或其他合适的 >0 的数值，此时滚动条触底可正常触发函数。

<div
      class="searchListBox"
      v-if="searchList.length && showCurrent"
      v-infinite-scroll="load"
      infinite-scroll-distance="3"
      style="overflow: auto; height: 400px; overflow-x: hidden"
    >
      <div
        v-for="(item, index) in searchList"
        :key="index"
        style="display: flex"
        class="searchItem"
        @click="showItem(item)"
      >
        <div
          class="leftImg"
          style="
            width: 30px;
            margin-right: 10px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
          "
        >
          <!-- 一级 -->
          <img
            src="../../../assets/images/static/oneLev.png"
            alt=""
            v-if="item.level == '0'"
          />
          <img
            src="../../../assets/images/static/twoLev.png"
            alt=""
            v-if="item.level == '1'"
          />
          <img
            src="../../../assets/images/static/threeLev.png"
            alt=""
            v-if="item.level == '2'"
          />
          <img
            src="../../../assets/images/static/fourLev.png"
            alt=""
            v-if="item.level == '3'"
          />
          <img
            src="../../../assets/images/static/fiveLev.png"
            alt=""
            v-if="item.level == '4'"
          />
          <!-- 未定级 -->
          <img
            src="../../../assets/images/static/noneLev.png"
            alt=""
            v-if="item.level == '5'"
          />
        </div>
        <div class="rightTen" style="flex: 1">
          <div
            style="
              overflow: hidden;
              text-wrap: nowrap;
              width: 180px;
              text-overflow: ellipsis;
              margin-bottom: 4px;
              font-weight: 700;
              color: #333;
            "
          >
            {{ item.name }}
          </div>
          <div style="margin: 4px 0; color: #f59a23; font-size: 12px">
            {{ getLev(item.level) }}
          </div>
          <div
            style="
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 设置最大显示行数 */
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              font-size: 12px;
              color: #555;
            "
          >
            {{ item.areaName }}{{ item.townshipName }}{{ item.detail }}
          </div>
        </div>
      </div>
    </div>