鸿蒙开发banner

鸿蒙开发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) => {

      })
    }
  }
}

有需要完整源码私信或者评论