uni-app中list图片长列表引起页面异常卡顿

uni-app中list图片长列表引起页面异常卡顿

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.1 HBuilderX 
## 操作步骤：
- 下载打开我上传的demo项目即可体验

## 预期结果：
- 流畅滑动

## 实际结果：
- 非常卡顿！！！！！

## bug描述：
展示商品详情，底部加载图片列表，nvue中页面变的非常卡顿,
补充一下iOS不会卡顿

[![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210326/3a730479d8d8b7e6caadaa1a8e497787)](//ask.dcloud.net.cn/file/download/file_name-dGVzdC56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTAzMjYvM2E3MzA0NzlkOGQ4YjdlNmNhYWRhYTFhOGU0OTc3ODc=)

更多关于uni-app中list图片长列表引起页面异常卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看了你的示例。list的cell使用的不对 应该对uni-cell v-for 而不是image。修改成如下： <uni-list style="flex: 1;flex-direction: column;" :scroll-y="true">
<uni-cell v-for="(item,index) in imgList" :key="index">
<view style="background-color: #f3f3f3;margin-top: 24rpx;">
<image :fade-show="true" :lazy-load="true" mode="widthFix" :src="item" :data-index="index"></image>
</view>
</uni-cell>
</uni-list>

更多关于uni-app中list图片长列表引起页面异常卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


完美解决 是我傻逼了 感谢回复

在uni-app中处理长图片列表卡顿问题，特别是Android平台，建议从以下几个方面优化：

  1. 使用<list>组件替代<scroll-view>：对于长列表，<list>组件具有更好的性能表现，支持回收机制，能有效减少内存占用。

  2. 图片懒加载：通过lazy-load属性实现图片懒加载，避免一次性加载过多图片资源。示例：

    <image lazy-load :src="item.img"></image>
回到顶部