HarmonyOS 鸿蒙Next swiper自动循环滑动

@Component export struct AA2 { @Prop bannerList: string[] = [] @Prop source: string @Prop line: number @State randomMarginLeft: number[] = [] @State widthArr: number[] = [] @State rowsData: Array<Array<hot_type>> = [] @State remainder: number = 0 @State timer: number | null = 0 @State lastItemOffsetX: number = 0 @State offsetX: number = 0 @State showWidth: number = 0 @State initFlag: boolean = false @State list: Array<hot_type> = [] @State xoffsetList: number[] = [] @State yoffsetList: number[] = [] //@State contentWidthList: number[] = [] @State listFlagY: boolean[] = [] @State listFlagX: boolean[] = [] closeClick(): void = () => { };

aboutToAppear(): void { for (let i = 0; i < this.bannerList.length; i++) { this.list.push(new hot_type(this.bannerList[i], this.getRandomFlag())) } this.dealData() }

init() { this.initFlag = true this.timer = setInterval(() => { for (let i = 0; i < this.xoffsetList.length; i++) { let strJsonx = getInspectorByKey(listItemX${i}) let objx: Record<string, string> = JSON.parse(strJsonx) let rectInfox: string[] = JSON.parse(’[’ + objx.$rect + ‘]’) let rightx: number = JSON.parse(’[’ + rectInfox[1] + ‘]’)[0]

    let strJsony = getInspectorByKey(`listItemY${i}`)
    let objy: Record<string, string> = JSON.parse(strJsony)
    let rectInfoy: string[] = JSON.parse('[' + objy.$rect + ']')
    let righty: number = JSON.parse('[' + rectInfoy[1] + ']')[0]
    if (px2vp(rightx) <= this.showWidth) {
      if (!this.listFlagY[i] && px2vp(righty) <= 0) {
        this.yoffsetList[i] = this.showWidth
        this.listFlagY[i] = true
        this.listFlagX[i] = false
      }
    }

    if (px2vp(righty) <= this.showWidth) {
      if (!this.listFlagX[i] && px2vp(rightx) <= 0) {
        this.xoffsetList[i] = this.showWidth
        this.listFlagX[i] = true
        this.listFlagY[i] = false
      }
    }
    this.yoffsetList[i] -= 0.5
    this.xoffsetList[i] -= 0.5
  }
}, 20)

}

dealData() { // 计算每组的大小 let groupSize = Math.floor(this.list.length / this.line); let remainder = this.list.length % this.line; // 处理剩余的元素 if (remainder > 0) { groupSize += 1; } let startIndex = 0; for (let i = 0; i < this.line; i++) { let endIndex = startIndex + groupSize; this.rowsData.push(this.list.slice(startIndex, endIndex)); startIndex = endIndex; this.randomMarginLeft.push(Math.floor(Math.random() * 80)) this.xoffsetList.push(0) this.listFlagX.push(false) this.listFlagY.push(false) } }

getRandomFlag(): boolean { let numberRandom = parseInt((Math.random() * 101).toString()); return numberRandom % 5 === 0 }

build() { Column() { Row() { Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { Text(‘666’) .fontSize(14) .fontColor(’#000’) Image($r(“app.media.startIcon”)) .width(12) .height(12) .onClick(() => { this.closeClick(); }) } } .padding(10) .height(40) .width(‘100%’)

  List() {
    ForEach(this.rowsData, (item: hot_type[], index) => {
      List() {
        ForEach(item, (child: hot_type) => {
          ListItem() {
            Row() {
              Image($r('app.media.app_icon')).width(11).height(13).margin({ right: 4 })
                .visibility(child.isHot ? Visibility.Visible : Visibility.None)
              Text(child.name)
                .height(30)
                .fontSize(12)
            }
            .onClick(() => {
              console.log('onClick')
            })
            .padding({ left: 8, right: 8 })
          }
          .margin({ right: 8 })
          .backgroundColor('#fff')
          .borderRadius(15)
        })
      }
      .id(`listItemX${index}`)
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
        this.yoffsetList.push(Number(newValue.width!))
      })
      .height(30)
      .margin({ top: 8 })
      .animation({
        duration: 1000,
        playMode: PlayMode.Normal,
        tempo: 0.2,
        iterations: -1
      })
      .translate({ x: this.xoffsetList[index], y: 0 })
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
    })
  }
  .width('100%')
  .onScrollFrameBegin((offset, state) => {
    return { offsetRemain: 0 }
  })
  .height('calc(100% - 30vp)')
  .listDirection(Axis.Horizontal)
  .scrollBar(BarState.Off)

  List() {
    ForEach(this.rowsData, (item: hot_type[], index) => {
      List() {
        ForEach(item, (child: hot_type) => {
          ListItem() {
            Row() {
              Image($r('app.media.app_icon')).width(11).height(13).margin({ right: 4 })
                .visibility(child.isHot ? Visibility.Visible : Visibility.None)
              Text(child.name)
                .height(30)
                .fontSize(12)
            }
            .onClick(() => {
              console.log('onClick')
            })
            .padding({ left: 8, right: 8 })
          }
          .margin({ right: 8 })
          .backgroundColor('#0f0')
          .borderRadius(15)
        })
      }
      .id(`listItemY${index}`)
      .height(30)
      .margin({ top: 8 })
      .animation({
        duration: 1000,
        playMode: PlayMode.Normal,
        tempo: 0.2,
        iterations: -1
      })
      .translate({
        x: this.yoffsetList[index],
        y: 0
      })
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
        // this.contentWidthList.push(Number(newValue.width!))
        // this.maxWidth = Math.max(this.maxWidth, newValue.width as number)
        // this.yoffsetList.push(Number(this.maxWidth))
      })
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
    })
  }
  .width('100%')
  .onScrollFrameBegin((offset, state) => {
    return { offsetRemain: 0 }
  })
  .position({
    y: 40
  })
  .height('calc(100% - 30vp)')
  .listDirection(Axis.Horizontal)
  .scrollBar(BarState.Off)
}
.onAreaChange((oldValue: Area, newValue: Area) => {
  this.showWidth = Number(newValue.width)
})
.id('contentItem')
.width('100%')
.backgroundImage($r('app.media.background'))
.backgroundImageSize(ImageSize.FILL)
.height('100%')
.onVisibleAreaChange([0, 1], (isVisible: boolean, currentRatio: number) => {
  if (!isVisible && currentRatio <= 0) {
    this.initFlag = false
    clearInterval(this.timer)
  } else if (isVisible && currentRatio > 0 && !this.initFlag) {
    this.init()
  }
})

} }

class hot_type { name: string isHot: boolean

constructor(name: string, isHot: boolean) { this.name = name; this.isHot = isHot } }