UNiAPP中使用虚拟列表

<template>
  <view class="pagination-list">
    <scroll-view
      scroll-y="true"
      class="scroll-container"
      v-if="items.length > 0 || loading"
      @scrolltolower="onScrollToLower"
      @scroll="onScroll"
      :lower-threshold="lowerThreshold"
      :refresher-enabled="false"
      :show-scrollbar="false"
      :scroll-top="scrollToTop"
    >
      <!-- 虚拟渲染模式下渲染顶部占位、可见项、底部占位 -->
      <template v-if="virtual">
        <view class="phantom" :style="{ height: listHeight + 'px' }"></view>
        <view
          class="content"
          :style="{ transform: `translate3d(0, ${currentOffset}px, 0)` }"
        >
          <slot
            :items="visibleItems"
            :loading="loading"
            :has-more="hasMore"
            :refresh="refresh"
            :load-more="loadMore"
          ></slot>
          <!-- 加载提示 -->
          <view class="loading-footer">
            <template v-if="loading && !isRefreshing">
              <image
                class="loadingImg"
                src="https://img.lulufulo.com/front/img/small-loading.gif"
              />
            </template>
            <template v-if="!hasMore && !loading && items.length > 0">
              <view class="loadmore-line">
                <text class="loadmore-tips">{{
                  noMoreText || __('没有更多数据啦！')
                }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>

      <!-- 非虚拟模式保持原行为 -->
      <template v-else>
        <!-- 默认插槽用于渲染列表项 -->
        <slot
          :items="items"
          :start-index="startIndex"
          :loading="loading"
          :has-more="hasMore"
          :refresh="refresh"
          :load-more="loadMore"
        ></slot>
        <!-- 加载提示 -->
        <view class="loading-footer">
          <template v-if="loading && !isRefreshing">
            <image
              class="loadingImg"
              src="https://img.lulufulo.com/front/img/small-loading.gif"
            />
          </template>
          <template v-if="!hasMore && !loading && items.length > 0">
            <view class="loadmore-line">
              <text class="loadmore-tips">{{
                noMoreText || __('没有更多数据啦！')
              }}</text>
            </view>
          </template>
        </view>
      </template>
    </scroll-view>

    <LEmpty v-else />
  </view>
</template>

<script>
  import LEmpty from '../l-empty/l-empty.vue';
  export default {
    name: 'l-list',
    components: {
      LEmpty,
    },
    props: {
      // 请求函数，需要返回Promise并包含分页数据
      request: {
        type: Function,
        required: true,
      },
      // 每页数据条数
      pageSize: {
        type: Number,
        default: 20,
      },
      // 默认传递给请求函数的额外参数
      defaultParams: {
        type: Object,
        default: () => ({}),
      },
      // 自定义无更多数据文本
      noMoreText: {
        type: String,
        default: '',
      },
      // 触底触发加载更多的阈值（单位px）
      lowerThreshold: {
        type: Number,
        default: 50,
      },
      // 是否开启虚拟渲染（只渲染可见项）
      virtual: {
        type: Boolean,
        default: false,
      },
      // 单项高度（px），若不准确可能导致位置偏差，建议传入固定高度
      itemHeight: {
        type: Number,
        default: 80,
      },
      // 预渲染缓冲项个数
      buffer: {
        type: Number,
        default: 5,
      },
    },
    data() {
      return {
        items: [],
        pageNum: 1,
        loading: false,
        hasMore: true,
        isRefreshing: false,
        // 虚拟列表相关状态
        scrollTop: 0,
        containerHeight: 0,
        startIndex: 0,
        visibleItems: [],
        totalHeight: 0,
        // 新增虚拟列表状态
        currentOffset: 0,
        start: 0,
        end: 0,
        listHeight: 0,
        visibleCount: 0,
        // 添加一个变量来控制scroll-view的滚动位置
        scrollToTop: 0,
      };
    },
    mounted() {
      this.loadData();
      // 若开启虚拟渲染，测量容器高度并初始化可视范围
      if (this.virtual) {
        this.$nextTick(() => {
          this.measureContainer();
        });
      }
    },

    computed: {},
    watch: {
      items: {
        handler() {
          if (this.virtual) {
            this.updateVirtualList();
          }
        },
        deep: true,
      },
    },
    methods: {
      // 更新虚拟列表
      updateVirtualList() {
        if (!this.virtual) return;

        this.listHeight = this.items.length * this.itemHeight;
        this.visibleCount =
          Math.ceil(this.containerHeight / this.itemHeight) + this.buffer * 2;

        // 重新计算可见项
        this.startIndex = Math.max(
          0,
          Math.floor(this.scrollTop / this.itemHeight) - this.buffer
        );
        this.end = Math.min(
          this.items.length,
          this.startIndex + this.visibleCount
        );
        this.visibleItems = this.items.slice(this.startIndex, this.end);

        // 计算偏移量
        this.currentOffset = this.startIndex * this.itemHeight;

        // 检查是否接近底部，如果是则加载更多数据
        this.checkBottom();
      },

      // 检查是否接近底部
      checkBottom() {
        if (!this.virtual) return;

        // 计算是否接近底部
        const totalHeight = this.items.length * this.itemHeight;
        const scrollBottom = this.scrollTop + this.containerHeight;
        const threshold = this.lowerThreshold;

        // 如果滚动到底部附近，触发加载更多
        if (
          totalHeight - scrollBottom <= threshold &&
          this.hasMore &&
          !this.loading
        ) {
          this.loadMore();
        }
      },

      // 在需要时测量 scroll 容器高度，尝试多个选择器作为回退
      measureContainer() {
        try {
          const query = uni.createSelectorQuery().in(this);
          // 多选器尝试：优先 scroll-container，其次 pagination-list 减去 top-box
          query
            .select('.scroll-container')
            .boundingClientRect((scRect) => {
              if (scRect && scRect.height) {
                this.containerHeight = scRect.height;
                this.updateVirtualList(); // 使用统一的更新方法
              } else {
                // 尝试测量整个组件高度
                const sys = uni.getSystemInfoSync && uni.getSystemInfoSync();
                if (sys && sys.windowHeight) {
                  // 使用屏幕高度减去页面其他部分的高度
                  this.containerHeight = sys.windowHeight - 100; // 预留100px给其他UI元素
                  this.updateVirtualList(); // 使用统一的更新方法
                }
              }
            })
            .exec();
        } catch (e) {
          // ignore measurement failure
          console.warn('measureContainer failed', e);
        }
      },
      // 首次加载数据
      loadData() {
        this.pageNum = 1;
        this.items = [];
        this.hasMore = true;
        this.getList();
      },

      // 刷新数据
      refresh() {
        this.isRefreshing = true;
        this.loadData();
      },

      // 加载下一页
      loadMore() {
        if (this.hasMore && !this.loading) {
          this.getList();
        }
      },

      // 滚动到底部时触发
      onScrollToLower() {
        // 对于虚拟列表，这个事件可能不会被正确触发，所以我们主要依赖 checkBottom 方法
        if (!this.virtual) {
          // 非虚拟模式按原逻辑触底加载
          this.loadMore();
        }
      },

      // 通用滚动事件处理（用于虚拟渲染）
      onScroll(e) {
        if (!this.virtual) {
          // 非虚拟模式，使用原始的滚动处理
          const top = (e && e.detail && e.detail.scrollTop) || 0;
          this.scrollTop = top;
          return;
        }

        // 虚拟模式下的滚动处理
        const top = (e && e.detail && e.detail.scrollTop) || 0;
        this.scrollTop = top;

        // 立即更新虚拟列表，确保 visibleItems 与 transform 同步
        this.updateVirtualList();
      },

      // 获取列表数据
      getList() {
        if (this.loading) return;

        this.loading = true;

        // 合并分页参数和默认参数
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.defaultParams,
        };

        this.request(params)
          .then((response) => {
            // 处理响应数据
            const data = response.data || response;
            let newItems = data.items || data;
            const startIndex = this.items.length;
            newItems = newItems.map((item, index) => ({
              ...item,
              __index__: startIndex + index, // 添加真实下标
            }));
            if (this.isRefreshing) {
              this.items = [...newItems];
              this.isRefreshing = false;
              // 重置虚拟渲染位置
              if (this.virtual) {
                this.scrollTop = 0;
              }
              // 确保在 DOM 更新后计算可见区
              this.$nextTick(() => {
                if (
                  this.virtual &&
                  (!this.containerHeight || this.containerHeight === 0)
                ) {
                  this.measureContainer();
                } else {
                  this.updateVirtualList();
                }
              });
            } else {
              this.items = [...this.items, ...newItems];
              // 更新可见区以便虚拟渲染显示新项
              if (this.virtual) {
                this.$nextTick(() => {
                  if (!this.containerHeight || this.containerHeight === 0) {
                    this.measureContainer();
                  } else {
                    this.updateVirtualList();
                  }
                });
              }
            }

            // 判断是否还有更多数据
            if (Array.isArray(newItems) && newItems.length > 0) {
              // 如果返回的数据少于请求的pageSize，则认为没有更多数据
              if (newItems.length < this.pageSize) {
                this.hasMore = false;
              } else {
                this.pageNum++;
              }
            } else {
              this.hasMore = false;
            }

            this.$emit('load-success', data);
          })
          .catch((error) => {
            this.$emit('load-error', error);
            console.error('PaginationList load error:', error);
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  };
</script>

<style lang="scss">
  .pagination-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .scroll-container {
    flex: 1;
    height: 100%;
  }

  .phantom {
    position: relative;
    width: 100%;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
  }

  .loading-footer {
    padding: 15px 0;
    display: flex;
    justify-content: center;

    .loadmore-line {
      border-top: 1px solid #e5e5e5;
      margin: 0 50px;
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
    }

    .loadmore-tips {
      position: relative;
      top: -0.9em;
      padding: 0 0.55em;
      background-color: #f5f5f5;
      color: #999999;
    }

    .loadingImg {
      width: 50px;
      height: 50px;
    }
  }
</style>