HarmonyOS 首页轮播效果实现？

Question

如题：HarmonyOS 首页轮播效果实现？

Answer 1

参考以下demo：

Index页：

import router from '@ohos.router';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  pageInfos: NavPathStack = new NavPathStack()
  @State message: string = '登录'

  aboutToAppear(){
    if(this.pageInfos === undefined){
      this.pageInfos = new NavPathStack();
    }
    this.pageInfos.pushPath({name :'SwiperPage'},false)
  }

  build() {
    Column() {
      Row({space:100}){
        Button(this.message).width(80).height(40)
          .onClick(() => {
            router.replaceUrl({
              url:'pages/SwiperPage',
              params:true
            }).catch((error:BusinessError) => {
              console.error('Failed to replaceUrl: ' + error);
            })
          })
      }
    }
  }
}

SwiperPage页：

@Entry
@Component
struct SwiperPage {
  private DISPLAY_COUNT: number = 1
  @State currentIndex: number = 0
  @State data: number[] = []
  private swiperWidth: number = 0
  @State imageSrc: string[] = [
    'xxxx',
    'xxxx',
    'xxx'
  ]
  @State backgroundImageSrc: string[] = [
    'xxx',
    'xxx',
    'xxxx'
  ]

  aboutToAppear(): void {
    this.imageSrc.forEach((item, index) => {
      this.data.push(index);
    });
  }

  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
    let nextIndex = index
    if (index > 0 && event.currentOffset > 0) {
      nextIndex--
    } else if (index < 3 && event.currentOffset < 0) {
      nextIndex++
    }
    let swipeRatio = Math.abs(event.currentOffset / this.swiperWidth)
    let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，tabBar切换到下一页。
    return { 'index': currentIndex}
  }

  build() {
    Column() {
      Swiper() {
        ForEach(this.imageSrc, (item: string, index: number) => {
          Image(item)
            .width('90%')
            .height('100%')
        }, (item: string) => item)
      }
      .onAreaChange((oldValue: Area,newValue: Area)=> {
        let width = Number.parseFloat(newValue.width.toString())
        this.swiperWidth = Number.isNaN(width) ? 0 : width
      })
      .onChange((index) => {
        this.currentIndex = index
      })
      .margin({top:91.5})
      .height(165.3)
      .indicator(false)
      .loop(true)
      .autoPlay(true)
      .displayCount(this.DISPLAY_COUNT, true)
      .effectMode(EdgeEffect.None)
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
        this.currentIndex = targetIndex
      })
      .onGestureSwipe((index: number,event: TabsAnimationEvent) => {
        // 在页面跟手滑动过程中，逐帧触发该回调。
        let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
        this.currentIndex = currentIndicatorInfo.index
      })
      // 自定义指示器
      Row() {
        ForEach(this.data, (index: number) => {
          Column()
            .width(this.currentIndex === index ? 10 : 7)
            .height(this.currentIndex === index ? 10 : 7)
            .margin(5)
            .borderRadius(this.currentIndex === index ? 10 : 7)
            .backgroundColor(Color.Green)
            .backgroundColor(this.currentIndex === index ? '#8baba8a8' : '#ffffff')
        }, (item: string) => item)
      }
      // 设置指示点距离swiper上下的距离
      .margin({ top: -25 })
    }
    .width('100%')
    .height(400)
    .backgroundImage(this.backgroundImageSrc[this.currentIndex])
    .backgroundImageSize(ImageSize.Cover)
  }
}

module.json5页添加：

"requestPermissions": [
{"name":"ohos.permission.INTERNET"}
]

main\_pages.json页修改：

{
  "src": [
  "pages/Index",
  "pages/SwiperPage"
  ]
}