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

后台返回的分页数据需要实现滚动条触底加载下一页， 用了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>