uni-app滚动视图的性能优化和使用

<scroll-view scroll-y="true" style="height: 100vh;">
  <view v-for="(item, index) in visibleItems" :key="index">
    {{ item }}
  </view>
  <view v-if="loading">加载中...</view>
</scroll-view>

export default {
  data() {
    return {
      items: [], // 存储所有数据
      visibleItems: [], // 当前显示的数据
      page: 1,
      pageSize: 20,
      loading: false
    };
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      if (this.loading) return;
      this.loading = true;
      setTimeout(() => {
        const start = (this.page - 1) * this.pageSize;
        const end = this.page * this.pageSize;
        this.visibleItems = this.visibleItems.concat(this.items.slice(start, end));
        this.page++;
        this.loading = false;
      }, 500); // 模拟网络请求延迟
    }
  },
  mounted() {
    // 初始化数据
    this.items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
    this.visibleItems = this.items.slice(0, this.pageSize);
  }
};

<scroll-view scroll-y="true" style="height: 100vh;" @scroll="handleScroll">
  <view v-for="(item, index) in renderedItems" :key="index" :style="{ height: itemHeight + 'px' }">
    {{ item }}
  </view>
</scroll-view>

export default {
  data() {
    return {
      items: [], // 所有数据
      renderedItems: [], // 当前渲染的数据
      itemHeight: 50, // 每个item的高度
      scrollTop: 0,
      containerHeight: 0
    };
  },
  mounted() {
    this.items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
    this.containerHeight = uni.getSystemInfoSync().windowHeight;
    this.updateRenderedItems();
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      this.updateRenderedItems();
    },
    updateRenderedItems() {
      const start = Math.floor(this.scrollTop / this.itemHeight);
      const end = start + Math.ceil(this.containerHeight / this.itemHeight);
      this.renderedItems = this.items.slice(start, end);
    }
  }
};