uniapp 流式输出中文打字效果 给出demo
以下是一个使用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>
这个demo通过设置一个定时器,每200毫秒将原始文本的一部分赋值给typingText,实现了流式输出中文的打字效果
原文地址: https://www.cveoy.top/t/topic/h68W 著作权归作者所有。请勿转载和采集!