头图

实现效果:

0900086000300134184.20201216095126.86523331460016843504112994983392.png

代码示例:

RollingText.ets 组件封装
/**
 * 滚动文字特效
 */
@Component
export default struct RollingText {

  private num:number
  private timerId: number = -1
  @State counter: number = 0

  aboutToAppear() {
    this.timerId = setInterval(() => {
      this.counter += 1
      if(this.counter==this.num){
        clearTimeout(this.timerId)
      }
    }, 1)//2000
  }

  aboutToDisappear() {
    clearTimeout(this.timerId)
  }

  build(){
    Row(){
      Text(""+this.counter).fontWeight(700).fontColor('#ffffff').fontSize(14)
    }
  }
}

鸿蒙开发应用知识已更新在gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在码云。

搜狗高速浏览器截图20240326151450.png

调用页面

或+mau123789学习,是v喔
import RollingText from '../components/RollingText'
Column(){
  Text("控股公司(家)").fontWeight(700).fontColor('#ffffff').fontSize(16)
  RollingText({num:1100})
}.margin({left:10})

烧脑猴
24 声望21 粉丝

5年JAVA,3年Android。现转入鸿蒙开发行业,每日分享一些鸿蒙技术!