《鸿蒙第一行代码》第六课 懒加载示例

《鸿蒙第一行代码》第六课 懒加载示例

基本上真实项目列表都用的懒加载，因为列表很长，内容很复杂，如果不用懒加载，会很卡

经验总结： 仅支持List、Grid、Swiper以及WaterFlow组件。它的key很重要，如果改某一项的值显示没改变，得看看你的key是不是唯一

简单示例代码：

import { BaseDataSource } from './BaseDataSource'

class UserDataBean{
  id:number
  name:string

  constructor(id:number,name:string) {
    this.id = id
    this.name = name
  }
}

/**
 * @author ：congge
 * @date : 2024-05-11 17:12
 * @desc : 懒加载示例，基本上真实项目列表都用的懒加载，因为列表很长，内容很复杂，如果不用懒加载，会很卡
 * 注意：仅支持List、Grid、Swiper以及WaterFlow组件。它的key很重要，如果改某一项的值显示没改变，得看看你的key是不是唯一
 **/

@Entry
@Component
struct ListLazyPage {
  data:BaseDataSource<UserDataBean> = new BaseDataSource()

  aboutToAppear(){
    let userList = [new UserDataBean(1,'张1'),new UserDataBean(2,'张2'),
      new UserDataBean(3,'张3'),new UserDataBean(4,'张4'),
      new UserDataBean(5,'张5'),new UserDataBean(6,'张6'),
      new UserDataBean(7,'张7'),new UserDataBean(8,'张8'),
      new UserDataBean(9,'张9'),new UserDataBean(10,'张10'),
      new UserDataBean(11,'张11'),new UserDataBean(12,'张12'),
      new UserDataBean(13,'张13'),new UserDataBean(14,'张14'),
      new UserDataBean(15,'张15'),new UserDataBean(16,'张16'),
      new UserDataBean(17,'张17'),new UserDataBean(18,'张18'),
      new UserDataBean(19,'张19'),new UserDataBean(20,'张20')];
    this.data.setNewData(userList)
  }

  build() {

      Column() {
        List(){
          LazyForEach(this.data,(item:UserDataBean,index:number)=>{
            ListItem(){
              Text(item.name)
                .width('100%')
                .height(100)
                .textAlign(TextAlign.Center)
                .onClick(()=>{
                  //改变item中的某个值显示,它是很方便的不用定其他状态去改变了
                  item.name = `大家好，${item.name}`
                  this.data.notifyDataChange(index)
                })
            }
          },(item:UserDataBean,index:number) =>
             // 这里加上时间戳，这样它才是唯一值，并且你要刷新时，它需要不一样的唯一值。否则你上面的notifyDataChange没有效果
            `${item.id}-${index}-${new Date().getTime()}`
          )
        }

      }
      .width('100%')
      .height('100%')
  }
}

《鸿蒙第一行代码》项目代码结构图：

有需要《鸿蒙第一行代码》项目源码的私信我，我每天都看私信的