@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')
}
}