VirtualScroll 虚拟滚动

滚动至底部时，加载更多数据。

当页面中需要展示大量数据时，只会加载部分可见的数据，而不是一次性全部加载，从而提高页面的性能和用户体验。

基础用法

垂直方向固定高度，即列表每个项的高度固定统一，滚动后按高度计算视图内需要展示的列表项。

正在载入...

<script setup>
import PfVirtualScroll from '@/components/lib/VirtualScroll/src/VirtualScroll.vue'
</script>
<template>
  <div class="pf-basic-container">
    <div class="news-box">
      <pf-virtual-scroll
        #default="oneItem"
        :oneHeight="115"
        :requestUrl="'http://localhost:3000/api/vscroll'"
      >
        <router-link class="one-new" to="/virtualScrollDetail">
          <div class="new-left">
            <h3>
              {{ oneItem.thisItem.name }}
            </h3>
            <div>
              <p>
                <span class="read">{{ oneItem.thisItem.price_format }}/晚</span>
                <span>
                  {{ oneItem.thisItem.reviews_count }}
                </span>
              </p>
            </div>
          </div>
          <div class="new-right">
            <img :src="oneItem.thisItem.picture_url" alt="PIC" />
          </div>
        </router-link>
      </pf-virtual-scroll>
    </div>
  </div>
</template>
<style lang="css" scoped>
.pf-basic-container {
  height: 40vh;

  .news-box {
    width: 100%;
    height: 100%;

    .one-new {
      display: flex;
      text-decoration: none;
      color: #696969;
      padding: 15px 10px;
      border-bottom: 1px solid #dedede;

      .new-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-right: 10px;
      }

      .new-left h3 {
        font-size: 16px;

        /* 固定高度专属: 超出部分省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .new-left div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
      }

      .new-left img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
      }

      .new-left .read {
        margin: 0 5px;
      }

      .new-right img {
        flex: 0 0 105px;
        height: 65px;
      }
    }
  }
}
</style>

水平滚动

水平方向固定高度，即列表每个项的高度固定统一，滚动后按高度计算视图内需要展示的列表项。

正在载入...

<script setup>
import PfVirtualScroll from '@/components/lib/VirtualScroll/src/VirtualScroll.vue'
</script>
<template>
  <div class="pf-vertical-container">
    <pf-virtual-scroll
      :scrollDirection="'horizontal'"
      :oneWidth="250"
      #default="oneItem"
      :requestUrl="'http://localhost:3000/api/vscroll'"
    >
      <router-link class="one-house" to="/virtualScrollDetail">
        <div class="house-item">
          <div class="inner">
            <div class="cover">
              <img :src="oneItem.thisItem.picture_url" alt="" />
            </div>
            <div class="desc">
              {{ oneItem.thisItem.reviews_count }}
            </div>
            <div class="name">{{ oneItem.thisItem.name }}</div>
            <div class="price">均价 {{ oneItem.thisItem.price_format }}/晚</div>
          </div>
        </div>
      </router-link>
    </pf-virtual-scroll>
  </div>
</template>
<style lang="css" scoped>
.pf-vertical-container {
  height: 380px;

  .one-house {
    width: 100%;

    .house-item {
      box-sizing: border-box;
      width: 250px;
      height: 350px;
      padding: 8px;
      margin: 8px 0px;
    }

    .cover {
      position: relative;
      box-sizing: border-box;
      padding: 66.66% 8px 0px;
      border-radius: 3px;
      overflow: hidden;
    }

    .cover > img {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .desc {
      margin: 10px 0px 5px;
      font-size: 12px;
      font-weight: 700;
      color: rgb(57, 87, 106);
    }

    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      margin: 8px 0px;
    }
  }
}
</style>

动态高度

即列表项高度需要在页面运行起来，渲染完毕之后才能确定高度。

正在载入...

<script setup>
import PfVirtualScroll from '@/components/lib/VirtualScroll/src/VirtualScroll.vue'
</script>
<template>
  <div class="pf-dynamic-container">
    <div class="news-box">
      <pf-virtual-scroll
        #default="oneItem"
        :autoHeight="true"
        :estimatedItemHeight="120"
        :requestUrl="'http://localhost:3000/api/vscroll'"
      >
        <router-link class="one-new" to="/virtualScrollDetail">
          <div class="new-left">
            <h3>
              {{ oneItem.thisItem.name }}
              {{ oneItem.thisItem.name }}
              {{ oneItem.thisItem.name }}
            </h3>
            <div>
              <p>
                <span class="read">{{ oneItem.thisItem.price_format }}/晚</span>
                <span>
                  {{ oneItem.thisItem.reviews_count }}
                </span>
              </p>
            </div>
          </div>
          <div class="new-right">
            <img :src="oneItem.thisItem.picture_url" alt="PIC" />
          </div>
        </router-link>
      </pf-virtual-scroll>
    </div>
  </div>
</template>
<style lang="css" scoped>
.pf-dynamic-container {
  height: 50vh;

  .news-box {
    width: 100%;
    height: 100%;

    .one-new {
      display: flex;
      text-decoration: none;
      color: #696969;
      padding: 15px 10px;
      border-bottom: 1px solid #dedede;

      .new-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-right: 10px;
      }

      .new-left h3 {
        font-size: 16px;
      }

      .new-left div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
      }

      .new-left img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
      }

      .new-left .read {
        margin: 0 5px;
      }

      .new-right img {
        flex: 0 0 105px;
        height: 65px;
      }
    }
  }
}
</style>

VirtualScroll 属性

属性名	说明	类型	默认值
msg	请求提示信息	string	正在载入
oneHeight	记录单条数据高度	number	100
oneWidth	记录单条数据宽度度	number	100
requestUrl	请求数据的url	string	''
offset	请求数据偏移量	number	0
size	每页显示条数	number	20
scrollDirection	滚动方向	string	vertical
autoHeight	是否需要动态高度计算	boolean	false
estimatedItemHeight	动态高度估算值	number	100