实战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')

  }
}
相关推荐
遇到困难睡大觉哈哈2 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划5 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说5 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu8 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉8 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
kumalab10 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会11 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK15 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo16 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉16 小时前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos