鸿蒙开发Banner

893151960

于 2024-09-04 14:31:19 发布

阅读量196

点赞数 1

文章标签：鸿蒙鸿蒙系统鸿蒙开发鸿蒙教程鸿蒙banner

本文链接：https://blog.csdn.net/u010074743/article/details/141893071

版权

鸿蒙开发banner

banner几乎每个app都有，它也比较简单。用的是swiper组件

效果图：

在这里插入图片描述

直接上代码：

@Component
export struct HomeBannerComponent {
  @Prop  bannerBeans: BaseDataSource<HomeBannerDataBean>

  build(){
    if (this.bannerBeans && this.bannerBeans.totalCount() > 0) {
      Swiper() {
        LazyForEach(this.bannerBeans, (item: HomeBannerDataBean, index:number) => {
          Image(item.picture)
            .width('100%')
            .aspectRatio(2)
            .onClick(()=>{

            })
        },(item: HomeBannerDataBean, index:number) => `${JSON.stringify(item)}-${index}`)
      }
      .clip(true)
      .index(0)
      .autoPlay(this.bannerBeans.totalCount() >= 2)
      .interval(2000)
      .indicator(true)
      .loop(this.bannerBeans.totalCount()>=2)
      .duration(1000)
      .indicator(
        Indicator.dot()
          .color($r('app.color.color_ee'))
          .selectedColor($r('app.color.color_black'))
      )
      .onChange((_index: number) => {

      })
    }
  }
}