#鸿蒙通关秘籍#如何实现HarmonyOS文本自动循环滚动效果？

Scroll() {
  Row() {
    Text(this.tripDataItem.ticketEntrance)
      .onAreaChange((oldValue, newValue) => {
        this.ticketCheckTextWidth = Number(newValue.width);
      })
    if (this.ticketCheckTextWidth >= this.ticketCheckScrollWidth) {
      Blank().width(Constants.BLANK_SPACE)
      Text(this.tripDataItem.ticketEntrance)
    }
   }.offset({ x: this.ticketCheckTextOffset })
}
.width('30%')
.enableScrollInteraction(false)
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.onAreaChange((oldValue, newValue) => {
  this.ticketCheckScrollWidth = Number(newValue.width);
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

scrollAnimation() {
  if (this.ticketCheckTextWidth < this.ticketCheckScrollWidth) {
    return;
  }
  animateTo({
    duration: Constants.ANIMATION_DURATION,
    curve: Curve.Linear,
    delay: this.delay,
    onFinish: () => {
      setTimeout(() => {
        this.ticketCheckTextOffset = 0;
        this.scrollAnimation();
      }, Constants.DELAY_TIME)
    }
  }, () => {
    this.ticketCheckTextOffset = -(this.ticketCheckTextWidth + Constants.BLANK_SPACE)
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.