Swiper组件是否支持自定义动画,比如切换时渐隐渐现的效果

Swiper组件是否支持自定义动画,比如切换时渐隐渐现的效果

HarmonyOS
2024-06-04 00:09:43
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
p3586
import { 
  Banner, 
  BannerOptions, 
  AnimatedEnum, 
  IndicatorConfig, 
  CircleIndicator, 
  SwiperIndicator, 
  IData 
} from '@ohos/banner' 
 
export class Data implements IData { 
  str: string = ""; 
} 
 
@Entry 
@Component 
struct BannerSamplePage { 
  private swiperController: SwiperController = new SwiperController() 
  @State bannerSize: number = 3; // 默认展示10个 
  // CircleIndicator 参数配置 
  @State indicatorConfig: IndicatorConfig = new IndicatorConfig(3, 0, '#5CB85C', '#FFFFFF') 
  // Banner参数配置 
  @State bannerOptions: BannerOptions = { 
    swiperController: this.swiperController, 
    autoPlay: true, // 自动播放 
    loop: true, 
    indicator: { bool: false } as SwiperIndicator, 
    animatedEnum: AnimatedEnum.DepthPage, // 动画效果 
 
    onChange: (index: number) => { 
      console.log(' BannerConfigPage onChange 当前页面index=' + index) 
      this.indicatorConfig.setCurrentPosition(index) 
    } 
  } 
  // banner传入的用户数据 
  @State data: IData[] = [] 
  @State currentPosition: number = 1 
 
  aboutToAppear(): void { 
    // 创建banner用户模拟数据 
    this.createNewDataList(); 
  } 
 
  createNewDataList() { 
    let list: IData[] = [] 
    for (let i = 1; i <= this.bannerSize; i++) { 
      let data = new Data(); 
      data.str = '数字' + i.toString() 
      list.push(data); 
    } 
    this.data = list 
    this.indicatorConfig.setIndicatorSize(this.data.length) 
  } 
 
  // Banner页面内容设置,可自定义任意内容 
  BACKGROUND_COLORS = [Color.Red, Color.Orange, Color.Pink, Color.Grey] 
  IMAGE_RESOURCES = [$r('app.media.img1'), $r('app.media.img2'), $r('app.media.img3')] 
  @Builder 
  bannerContent(data: IData, index: number) { 
    Stack({ alignContent: Alignment.Center }) { 
      Image(this.IMAGE_RESOURCES[index % this.IMAGE_RESOURCES.length]) 
        .objectFit(ImageFit.Fill) 
        .width('100%') 
        .height('100%') 
 
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 
        Text(`这是第${index}个页面,用户数据为:${data[index]['str']}`) 
      } 
      .position({ x: 0, y: 200 }) 
      .height(40).width('100%') 
      .backgroundColor('#44000000') 
    } 
    .width('100%') 
    .height(240) 
  } 
 
  build() { 
    Scroll() { 
      Column() { 
        Text('画廊标题指示器展示').margin({ top: 20, bottom: 20 }) 
        Stack() { 
          // Banner 主体 
          Banner({ 
            bannerOptions: this.bannerOptions, 
            data: this.data, 
            bannerContent: (item, index) => { 
              this.bannerContent(item, index) 
            }, 
            currentPosition: this.currentPosition 
          }).width('100%') 
            .height(240) 
 
          Flex({ direction: FlexDirection.RowReverse, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 
            // 数字指示器 
            // Text(`${(this.currentPosition + 1)}/${this.data.length}`) 
            // .fontColor(Color.White) 
            // .margin({ left: 20, right: 60 }) 
            // 与Banner分离的CircleIndicator 
            CircleIndicator({ indicatorConfig: $indicatorConfig }) 
          } 
          .width('100%') 
          .height(40) 
          .position({ x: 0, y: 200 }) 
        }.width('100%') 
        .height(240) 
      }.width('100%') 
    } 
    .width('100%') 
    .height('100%') 
 
  } 
}

上述示例更新Banner参数配置:

// Banner参数配置 
@State bannerOptions: BannerOptions = { 
  swiperController: this.swiperController, 
  autoPlay: true, // 自动播放 
  loop: true, 
  indicator: { bool: false } as SwiperIndicator, 
  animatedEnum: AnimatedEnum.DepthPage, // 动画效果 
  animatedConfig: { 
    DepthPage_minScale: 1 
  }, 
  onChange: (index: number) => { 
    console.log(' BannerConfigPage onChange 当前页面index=' + index) 
    this.indicatorConfig.setCurrentPosition(index) 
  } 
}
分享
微博
QQ
微信
回复
2024-06-04 22:54:15
相关问题
弹窗打开、关闭动画是否支持自定义
875浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
1040浏览 • 1回复 待解决
Swiperindicator后续会支持自定义
625浏览 • 1回复 待解决
自定义弹窗自定义转场动画
456浏览 • 1回复 待解决
自定义组件是否支持renderFit属性
717浏览 • 1回复 待解决
是否支持自定义装饰器
974浏览 • 1回复 待解决
ArkTS是否支持自定义装饰器?
818浏览 • 1回复 待解决
TextInput是否自定义hover效果
976浏览 • 1回复 待解决
Swiper是否支持组件复用
393浏览 • 1回复 待解决
自定义组件嵌套子组件
8084浏览 • 3回复 待解决
如何实现自定义应用入场动画
409浏览 • 1回复 待解决
refresh期望能够自定义loading动画
643浏览 • 1回复 待解决
华为手机是否支持自定义锁屏页面?
2788浏览 • 1回复 待解决
如何自定义模拟Tabs组件
429浏览 • 1回复 待解决
如何自定义组件原型菜单
471浏览 • 1回复 待解决
ArkTs如何自定义容器组件
1807浏览 • 1回复 待解决