微信小程序实现打字机效果_小程序 打字机效果显示文字

普通打字机效果

实现：js 定时器将字符串 逐个填充到显示的字段上面  字间隔50毫秒

<view>{
  {noviceText}}</view>

let typingTime: any = null
let AudioContextoll = wx.createInnerAudioContext({ useWebAudioImplement: true })
data: {
    strings: '',
    noviceText: ''
},
onLoad() {
    let string = '打印的文字'
    this.setData({
          strings: string
    })
    AudioContextoll.src = "https://oss-test.newplay7.com/20221229/16723073755532453.mp3"
    AudioContextoll.play()
    typingTime && clearTimeout(typingTime)
    typingTime = setTimeout(() => {
      this.textTyping(string, 0)
    }, 500)
},
textTyping(s: string, x: number) {
    if (s.length <= x) {
      AudioContextoll.stop()
      return
    }
    typingTime = setTimeout(() => {
      this.setData({
        noviceText: this.data.noviceText + s[x]
      })