实战12-LazyForEach(太烦人了鸿蒙的懒加载好烦)

HomeDate.ets

export class RoomRecommendDateSource implements IDataSource {
  //内不用来触发ui更新对象
  listeners: DataChangeListener[] = []
  roomRecommendList: IRoomRecommendList = []

  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  getData(index: number) {
    return this.roomRecommendList[index]
  }

  totalCount(): number {
    return this.roomRecommendList.length
  }

  setList(list: IRoomRecommendList) {
    this.roomRecommendList = list;
    this.notifyDataReload();
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
}

import { getRoomRecommendListApi } from '../../api/home';
import { IRoomRecommendItem, ITagItem, RoomRecommendDateSource } from '../../api/models/HomeData';
import { BORDER_RADIUS, PADDING, PADDING_S } from '../../constants/size';

@Component
export default struct RoomRecommend {
  @State roomRecommendList: RoomRecommendDateSource = new RoomRecommendDateSource()
  //获取房源推荐列表
  getRoomRecommendList = async () => {
    const roomRecommendList = await getRoomRecommendListApi();
    this.roomRecommendList.setList(roomRecommendList)
    // console.log(JSON.stringify(this.roomRecommendList));
    // console.log(JSON.stringify('222'));
  }

  aboutToAppear(): void {
    this.getRoomRecommendList()
    // console.log(JSON.stringify('1111'));
  }

  build() {
    Column() {
      Row() {
        Text() {
          Span('周边房源').fontColor($r('app.color.black'))
          Span('推荐').fontColor($r('app.color.primary'))
        }
        .fontSize(16)
        .fontWeight(700)

        Row({ space: 6 }) {
          Text('更多推荐').fontSize(10).fontColor($r('app.color.gray_second'))
          Image($r('app.media.arrow_right')).width(4).height(8)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: PADDING, right: PADDING, bottom: PADDING_S })

      Grid() {
        LazyForEach(this.roomRecommendList, (room: IRoomRecommendItem) => {
          GridItem() {
            Column() {
              Stack() {
                Image(room.housePicture).width('100%').height('100%').objectFit(ImageFit.Fill).borderRadius({
                  topLeft: BORDER_RADIUS, topRight: BORDER_RADIUS
                })
                Image($r('app.media.room_text_bg')).width('100%').height('100%').objectFit(ImageFit.Fill).borderRadius({
                  topLeft: BORDER_RADIUS, topRight: BORDER_RADIUS
                })
                Row({ space: 6 }) {
                  Image($r('app.media.location'))
                    .width(12)
                    .height(14)
                    .objectFit(ImageFit.Fill)
                    .fillColor($r('app.color.white'))
                  Text(room.address).fontSize(10).fontColor($r('app.color.white'))
                }.margin({ left: 8, bottom: 6 })
              }.width('100%').height(120).alignContent(Alignment.BottomStart)

              Column() {
                Row() {
                  Text() {
                    Span(room.renPriceListing).fontSize(14)
                    Span(room.renPriceUnit).fontSize(12)
                  }.fontSize(14).fontColor('#E38010')

                  Text(room.rentArea + '㎡')
                }.width('100%').justifyContent(FlexAlign.SpaceBetween).height(22)

                Text(room.houseTitle)
                  .fontSize(12)
                  .fontColor($r('app.color.black'))
                  .textOverflow({
                    overflow: TextOverflow.Ellipsis
                  })
                  .width('100%')
                  .height(18)
                  .maxLines(1)
                  .margin({ top: 2 })
                Row({ space: 6 }) {
                  ForEach(room.tags.slice(0, 2), (tag: ITagItem, index) => {
                    Text(tag.name)
                      .fontSize(10)
                      .fontColor(index === 1 ? '#b3b3b3' : $r('app.color.white'))
                      .backgroundColor(index === 1 ? $r('app.color.bg_gray') : $r('app.color.primary'))
                      .height(16)
                      .padding({ left: 6, right: 6 })
                      .borderRadius(2)
                  }, (tag: ITagItem) => tag.name)
                }.width('100%').margin({ top: 6 })

              }.width('100%').padding(PADDING_S)
            }.width(160).height(210).borderRadius(BORDER_RADIUS).backgroundColor($r('app.color.white'))

          }.backgroundColor('#fff1efef')
        }, (room: IRoomRecommendItem) => room.id)
      }
      .width('100%')
      .height(210 * 4 + 16 * 2 + 8 * 3)
      .backgroundColor($r('app.color.bg_gray'))
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(8) //行间距
      .columnsGap(8) //列间距
      .padding(PADDING)
    }
    .width('100%')
    .margin({ top: 32 })

  }
}

 

注：上一节是foreach，这里改为了lazyforeach，鸿蒙的lazyforeach是我目前遇见最难写的😂应该是我太菜了。好麻烦