134.HarmonyOS NEXT系列教程之3D立方体旋转轮播案例讲解（五）：实战应用

// 导入必要的类和接口
import { CubeSwiperController, MySwiperItem } from './DataModel';

// 创建控制器实例
const controller = new CubeSwiperController();

// 准备轮播数据
const swiperData = [
    new MySwiperItem(
        "精选推荐",
        "发现好物",
        $r('app.media.banner1')
    ),
    new MySwiperItem(
        "热门活动",
        "限时特惠",
        $r('app.media.banner2')
    ),
    new MySwiperItem(
        "新品上市",
        "品质优选",
        $r('app.media.banner3')
    )
];

@Entry
@Component
struct MainPage {
    private controller: CubeSwiperController = new CubeSwiperController();

    aboutToAppear() {
        // 设置初始数据
        this.controller.setData(swiperData);
    }
}

@Entry
@Component
struct MainPage {
    build() {
        Column() {
            Swiper(this.controller) {
                ForEach(swiperData, (item: MySwiperItem) => {
                    this.SwiperItem(item)
                })
            }
        }
    }

    @Builder
    SwiperItem(item: MySwiperItem) {
        Stack() {
            Image(item.image)
                .width('100%')
                .height('100%')
            
            Column() {
                Text(item.title)
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)
                Text(item.subTitle)
                    .fontSize(16)
            }
        }
    }
}

addNewItem() {
    const newItem = new MySwiperItem(
        "新增项目",
        "新项目描述",
        $r('app.media.new_banner')
    );
    this.controller.pushData(newItem);
}

updateItem(index: number) {
    const updatedItem = new MySwiperItem(
        "更新的标题",
        "更新的描述",
        $r('app.media.updated_banner')
    );
    this.controller.updateData(index, updatedItem);
}

handleItemClick(item: MySwiperItem) {
    // 处理点击事件
    console.info(`Clicked item: ${item.title}`);
}

onPageChange(index: number) {
    // 处理页面切换事件
    console.info(`Current page: ${index}`);
}

LazyForEach(swiperData, (item: MySwiperItem) => {
    this.SwiperItem(item)
}, item => item.title)

aboutToAppear() {
    // 预加载图片资源
    this.preloadImages([
        $r('app.media.banner1'),
        $r('app.media.banner2'),
        $r('app.media.banner3')
    ]);
}

validateItem(item: MySwiperItem): boolean {
    if (!item.title || !item.image) {
        console.error('Invalid item data');
        return false;
    }
    return true;
}

try {
    this.controller.addData(0, newItem);
} catch (error) {
    console.error(`Failed to add item: ${error.message}`);
}

@Entry
@Component
struct CubeSwiperDemo {
    private controller: CubeSwiperController = new CubeSwiperController();
    
    aboutToAppear() {
        // 初始化数据
        this.controller.setData(swiperData);
    }

    build() {
        Column() {
            // 轮播组件
            Swiper(this.controller) {
                ForEach(swiperData, (item: MySwiperItem) => {
                    this.SwiperItem(item)
                })
            }
            .width('100%')
            .height(300)
            .onChange((index) => this.onPageChange(index))

            // 控制按钮
            Row() {
                Button('添加')
                    .onClick(() => this.addNewItem())
                Button('更新')
                    .onClick(() => this.updateItem(0))
                Button('删除')
                    .onClick(() => this.controller.deleteData(0))
            }
            .padding(10)
        }
    }
}