uni-app 虚拟列表插件需求

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 虚拟列表插件需求

有没有人研究开发虚拟列表的，app上性能很重要，如果列表内容过多则会出现卡顿现象，为了避免这种情况，两种解决方案一种是分页，还有就是虚拟列表，所以虚拟列是提高app列表渲染性能的重要插件

Harmonyos Next教程
8 回复

解决了吗？


app的列表一般采用触底加载新的数据，通过数组追加的形式添加数据，一般不会造成卡顿，如果要更流畅一些，可以用分部加载，加骨架更好，我一般都是触底加载，然后数据数组后面都加一个灰色的占位块，获取返回值，在对应一个赋值就行了

嗯 如果是同时有1000条数据存在在页面上那?目前只有虚拟列表解决吧

回复 giao233: 我也是遇到了类似的问题，因为要渲染表格，一次性渲染100行，就会卡住了。。

偷偷推荐一下 z-paging-【支持nvue、vue3，使用wxs实现】高性能，全平台兼容。支持虚拟列表，支持自定义下拉刷新、上拉加载更多，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持国际化等100+项配置 支持虚拟列表，支持动态cell高度

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

虚拟列表

针对uni-app中虚拟列表插件的需求，我们可以利用第三方库或者自行实现一个简单的虚拟列表组件。以下是一个基于Vue和uni-app的简单虚拟列表实现示例。这个示例主要展示了如何通过计算来决定渲染哪些列表项，以减少DOM节点的数量，从而提升性能。

首先，确保你的uni-app项目已经创建并配置好。然后，你可以创建一个自定义组件，比如VirtualList.vue。

<template>
  <view class="virtual-list" :style="{ height: listHeight + 'px' }">
    <view
      class="list-item"
      v-for="(item, index) in visibleItems"
      :key="item.id"
      :style="{ transform: `translateY(${startIndex * itemHeight}px)` }"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: Array, // 数据源
    itemHeight: {
      type: Number,
      default: 50
    },
    visibleCount: {
      type: Number,
      default: 10
    },
    listHeight: {
      type: Number,
      default: 300
    }
  },
  computed: {
    startIndex() {
      return Math.floor(this.scrollTop / this.itemHeight);
    },
    endIndex() {
      return this.startIndex + this.visibleCount;
    },
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex).map(item => ({
        ...item,
        // 可以添加一些额外属性，比如索引等
        index: this.startIndex + this.items.slice(0, this.startIndex).length
      }));
    }
  },
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    }
  },
  mounted() {
    this.$refs.scrollWrapper.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    this.$refs.scrollWrapper.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scoped>
.virtual-list {
  overflow-y: auto;
  position: relative;
}
.list-item {
  position: absolute;
  width: 100%;
}
</style>

在这个组件中，我们使用了scrollTop来追踪滚动位置，并计算哪些列表项应该在视图中可见。注意，这里使用了position: absolute来定位列表项，这是为了避免浏览器渲染连续的DOM元素，从而提升性能。

为了使用这个组件，你需要在父组件中传入items数据，并设置itemHeight和listHeight等属性。确保父组件中有一个可以滚动的容器，并将这个容器的引用传递给VirtualList组件的scrollWrapper。

这个示例是一个基本的实现，实际应用中可能需要根据具体需求进行优化和调整。

回到顶部