uni-app nvue list长列表问题

uni-app nvue list长列表问题

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 iPhone7
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 弄个1000条的nvue页面，在iPhone7下会有这个问题

预期结果：

  • 不会延迟

实际结果：

  • 会延迟

bug描述：

  • <list /> 加 <cell /> 组合，数据列表达到1000条。快速从第1条滚动到500条，然后点击底499条数据，发现相应很延迟，基本要等3-4秒。发现要等scrollend执行后，点击数据列表才不会延迟。

更多关于uni-app nvue list长列表问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

nvue 已不在维护推荐使用性能更好的 uni-app x, 长列表示例: https://gitcode.net/dcloud/hello-uni-app-x/-/tree/alpha/pages/template/long-list

更多关于uni-app nvue list长列表问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可是项目是uniapp，用不了uniapp-x的东西。nvue不在维护，但是有bug也不修复吗

在uni-app中使用nvue开发长列表时，确实可能会遇到一些性能问题。这主要是因为nvue使用的是Weex引擎，它在处理长列表渲染时可能会有一定的性能瓶颈。以下是一些优化长列表渲染的代码案例，帮助你更好地管理nvue中的长列表。

1. 使用list组件

list组件是nvue专门为长列表优化提供的组件。它利用了虚拟列表（Virtual List）技术，只渲染可见区域的列表项，大大提高了性能。

<template>
  <list :height="listHeight" :item-count="itemCount" :item-size="itemSize">
    <cell>
      <text>{{ item.text }}</text>
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {
      listHeight: 500, // 列表高度
      itemCount: 1000, // 列表项数量
      itemSize: 50,    // 每个列表项的高度
      items: []
    };
  },
  mounted() {
    // 模拟数据
    for (let i = 0; i < this.itemCount; i++) {
      this.items.push({ text: `Item ${i + 1}` });
    }
  },
  methods: {
    // 根据index获取数据的方法，list组件会自动调用
    getCellData(index) {
      return this.items[index];
    }
  }
};
</script>

注意：在nvue的list组件中，你不需要直接渲染所有数据，而是通过getCellData方法按需提供数据。

2. 懒加载与分页

对于极端长的列表，可以考虑结合懒加载和分页技术。当用户滚动到底部时，加载下一页数据。

methods: {
  loadMore() {
    let start = this.items.length;
    let end = start + 20; // 每页加载20条数据
    for (let i = start; i < end; i++) {
      this.items.push({ text: `Item ${i + 1}` });
    }
    // 更新列表高度或重新计算
    this.listHeight += (end - start) * this.itemSize;
  },
  onScrollLower() {
    // 滚动到底部时触发
    this.loadMore();
  }
}

在模板中监听滚动事件：

<scroll @scrolltolower="onScrollLower">
  <!-- 列表内容 -->
</scroll>

总结

通过使用nvue的list组件和结合懒加载与分页技术，你可以有效地优化长列表的性能。这些技术不仅减少了内存占用，还提高了滚动流畅度，使得在长列表应用中提供更好的用户体验。在实际开发中，你可能还需要根据具体需求调整这些策略。

回到顶部