也是根据需求实现的效果, 在API9 下很难实现,因为没有动画开始事件, 实现起来会很生硬

封装代码内,主要是给item2个Column包围,以实现布局 以及 高度和opacity变化

@Builder function empty(){}



@Component
export default struct BuiSwiper  {

  private swiperController: SwiperController = new SwiperController()

  /**
   * 子项数量
   */
  @State count: number = 2;

  @State itemsArray: Array<number> =[];

  @BuilderParam slot:(index:number)=>void=empty;

  @State currentIndex:number=0;

  @State private targetIndex:number= this.currentIndex;

  /**
   * swiper高度 单位 vp
   */
  @State maxHeight:number=300;


  build(){
    Swiper(this.swiperController){
      ForEach(this.itemsArray,(item:number,index:number)=>{
        Column() {
          Column() {
            this.slot(index);
          } .height(this.getHeight(index)).clip(true)
          .opacity(this.calcOpacity(index)).align(Alignment.Center)
          .animation({
            duration: 1000,
            curve: Curve.Linear
          })
        }
        .height( this.maxHeight)
        .justifyContent(FlexAlign.Center)
      },(index:number)=>index+"")
    }
    .cachedCount(2)
    .index(this.currentIndex)
    .autoPlay(true)
    .interval(2000)
    .indicator(true)
    .loop(true)
    .duration(1000)
    .itemSpace(16)
    .curve(Curve.Linear)
    .prevMargin(5)
    .nextMargin(24)
    .displayMode(SwiperDisplayMode.STRETCH)
    .onChange((index: number) => {
      this.currentIndex = index
      this.targetIndex = index
    }).onAnimationStart( (index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {

      this.targetIndex = targetIndex
    }).height(this.maxHeight)
  }

  getHeight(index:number){
    return this.targetIndex==index? this.maxHeight : (this.maxHeight-64)
  }

  calcOpacity(index:number){
    if(this.targetIndex==index){
      return 1
    }else if(this.targetIndex==this.count-1){ //最后一个
       if(index==0){
         return 1;
       }else{
         return 0;
       }
    }else if(this.targetIndex==0){ //第一个
       if(index==this.count-1){
         return 0;
       }else{
         return 1;
       }
    }else if(this.targetIndex>index){
      return 0;
    }else {
      return 1
    }
  }

    aboutToAppear(){
      for (let i = 0; i < this.count; i++) {
        this.itemsArray.push(i);
      }
    }


}

调用示例

import BuiSwiper from '../bui/BuiSwiper'

@Component
export default struct BuiSwiperDemo {

  imageHeight:number=600
  imageWidth:number=320

  build() {
    Column() {
      this.buildContent()
    }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor("#00000030")

  }

  @Builder buildContent(){
    BuiSwiper({
      count:4,
      maxHeight:this.imageHeight,
      slot:(index:number)=>{
        this.buildSwiperContent(index);
      }
    });
  }

  @Builder buildSwiperContent(index:number){
      if(index==0) {
        Image("https://cdn7-static.tshe.com/uploads/images/TopicImage/1586247148063u=3983948783,3274300002&fm=26&gp=0.jpg")
          .objectFit(ImageFit.Cover)
          .width(this.imageWidth).height(this.imageHeight)
      }else if(index==1) {
        Image("https://cdn7-static.tshe.com/uploads/images/TopicImage/1586247159893timg%20(1).jpg")
          .objectFit(ImageFit.Cover)
          .width(this.imageWidth).height(this.imageHeight)
      }else if(index==2) {
        Image("https://cdn7-static.tshe.com/uploads/images/TopicImage/1586247442475%E7%B2%BE%E6%A2%B3%E6%A3%89plus.jpg")
          .objectFit(ImageFit.Cover)
          .width(this.imageWidth).height(this.imageHeight)
      }else if(index==3) {
        Image("https://cdn7-static.tshe.com/uploads/images/TopicImage/14768667595558%20(1).jpg")
          .objectFit(ImageFit.Cover)
          .width(this.imageWidth).height(this.imageHeight)
      }
  }
}

本章代码地址: https://gitee.com/jifsu_167/open-harmony-demo