实战06-LazyForEach

复制代码

@Observed
export class BannerListDataSource implements IDataSource {
  //内不用来触发ui更新对象
  listeners: DataChangeListener[] = []
  //用来管理数据
  bannerList: IBannerList = []

  //实现了IDataSource接口
  //接口需要必须定义四个方法：getData totalCount registerDataChangeListener unregisterDataChangeListener
  //读取对应下标的数据
  getData(index: number): IBannerItem {
    return this.bannerList[index]
  }

  //返回数据总长度
  totalCount(): number {
    return this.bannerList.length

  }

  //保存单个数据
  setData(item: IBannerItem) {
    //只会更新数据，不会更新ui
    this.bannerList.push(item);
    //更新ui
    this.notifyDataAdd(this.bannerList.length - 1)
  }

  //更新所有数据
  setList(list: IBannerList) {
    this.bannerList = list;
    this.notifyDataReload();
  }

  // 该方法为框架侧调用，为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);
    }
  }

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

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

复制代码

import { BannerListDataSource, IBannerItem } from '../../api/models/HomeData';

@Component
export default struct SwiperLayout {
  @ObjectLink bannerList: BannerListDataSource
  ;

  build() {
    Swiper() {
      LazyForEach(this.bannerList, (banner: IBannerItem) => {
        Image(banner.imageURL)
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Fill)
      }, (banner: IBannerItem) => banner.id + '')
    }
    .width('100%')
    .height(211 - 36) //暂时减去
    .autoPlay(true) //自动轮播
    .indicator(
      Indicator.dot()
        .color($r('app.color.indicator_color'))
        .selectedColor($r('app.color.indicator_active_color'))
    )
  }
}

复制代码

import { getHomeDataApi } from '../api/home';
import { BannerListDataSource } from '../api/models/HomeData';
import SwiperLayout from '../views/Home/SwiperLayout';
import { window } from '@kit.ArkUI';

@Entry
@Component
export default struct Home {
  @State bannerList: BannerListDataSource = new BannerListDataSource()
  //获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi()
    this.bannerList.setList(result.bannerList)
  }

  //生命周期函数：初始化渲染时候
  aboutToAppear(): void {
    this.getHomeData()

    window.getLastWindow(getContext())
      .then(win => {
        win.setWindowLayoutFullScreen(true)
      })
  }

  build() {
    Scroll() {
      Column() {
        //轮播图组件
        SwiperLayout({ bannerList: this.bannerList })
      }.width('100%')
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .align(Alignment.TopStart)
    .backgroundColor('#ff73b562')

  }
}