Uniapp 流式输出中文打字效果：完整 Demo 和 代码解析

<template>
  <view class='container'>
    <text class='typing-text'>{{ typingText }}</text>
  </view>
</template>
<script>
export default {
  data() {
    return {
      text: '这是一个流式输出中文的demo',
      typingText: ''
    }
  },
  mounted() {
    this.typingAnimation()
  },
  methods: {
    typingAnimation() {
      let index = 0
      const typingInterval = setInterval(() => {
        if (index <= this.text.length) {
          this.typingText = this.text.slice(0, index)
          index++
        } else {
          clearInterval(typingInterval)
        }
      }, 200)
    }
  }
}
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.typing-text {
  font-size: 24px;
}
</style>
<p>本示例通过设置一个定时器，每 200 毫秒将原始文本的一部分赋值给 <code>typingText</code>，实现了流式输出中文的打字效果。</p>