大丰网站建设,网站开发文档百度文库,西安优化官网公司,长沙响应式网站设计有哪些列表 是最常用到的组件 一 ForEach 渲染控制语法————Foreach Foreach的作用 遍历数组项#xff0c;并创建相同的布局组件块在组件加载时#xff0c; 将数组内容数据全部创建对应的组件内容#xff0c; 渲染到页面上 const swiperImage: Resource[] {$r(app.me…列表 是最常用到的组件 一 ForEach 渲染控制语法————Foreach Foreach的作用 遍历数组项并创建相同的布局组件块在组件加载时 将数组内容数据全部创建对应的组件内容 渲染到页面上 const swiperImage: Resource[] {$r(app.media.ic_home),$r(app.media.ic_coupons),$r(app.media.ic_internal_price) }; Swiper(){Foreach(swiperImage, (item: Resource) {Image(item).width(100%)...}, (item: Resource) JSON.stringify(item)) }二. LazyForEach 渲染控制语法 ————LazyForeach 使用 LazyForeach时框架会根据滚动容器可视区域按需创建组件 当组件滑出可视区域外时框架会进行组件销毁回收以降低内存占用 提高首次加载的速度不可滚动容器使用LazyForeach 其会退化为Foreach 全部创建内容使用的数据源需要继承 IDatasource 接口 WaterFlow(){LazyForEach(this.datasource, (item: ProductBean) {FlowItem(){FlowItemComponent({item: item})}}, (item: ProductBean) JSON.stringify(item)) }三 List列表 List 支持懒加载能力 List(){ForEach(mainViewModel.getSettingListData(),(item: ItemData) {ListItem(){this.settingCell(item)}},item item.toString()) }.divider({...}) 四 Grid网格布局 实现二维布局 可以根据rowsTemplate, columnTemplate 设置行数和列数 Grid(){ForEach(mainViewModel.getFirstGridData(),(item: ItemData) {GridItem(){Column(){Image(item.img)Text(item.title)}}}, item item.toString()) }.rowsTemplate(1fr 1fr) .columnsTemplate(1fr 1fr 1fr 1fr) .rowsGap(12) .columnsGap(8)网络显示如下图 方框所示 五 性能优化 在大数据量情况下 例如超过10万 使用ForEach加载 List, 会出现白屏 使用LazyForEach 不会白屏。 ForEach为什么会有性能问题 假设有1万条数据 手机的可视区域只能显示5条 剩余9千多条也会全量加载ForEach的加载原理就是这样。 LazyForEach实现了按需加载 减少了页面首次启动时一次性加载数据的时长 减少了内存峰值。 要对性能优化 就需要引入指标来进行分析、比较 我们可以从4方面进行优化 优化1 懒加载优化2 缓存列表项优化3 组件复用优化4 布局优化 注意 通过设置cachedCount 来指定缓存数量。 不同cachedCount 对列表滑动帧率的影响 一般而言 缓存的cachedCount n/2(n为一屏显示的列表数) 的时候 效果较好。 如果列表项中需要显示网络数据 而网络数据加载较慢为了提升列表信息的浏览效率和浏览体验 我们可以适当的多设置一些缓存数量; 如果列表中需要加载一些大图或者视频等 占用的内存较大为了减少内存的占用 我们需要适当地减少缓存数量的设置 (cachedCount n/2).