<template>
<view>
<text>{{ typedText }}</text>
</view>
</template>
<script>
export default {
data() {
return {
text: "Hello, World!",
typedText: ""
};
},
mounted() {
this.startTyping();
},
methods: {
startTyping() {
let currentIndex = 0;
const typingSpeed = 100; // 打字速度，单位：毫秒
const timer = setInterval(() => {
this.typedText += this.text[currentIndex];
currentIndex++;
if (currentIndex >= this.text.length) {
clearInterval(timer);
}
}, typingSpeed);
}
}
};
</script>
uni-app 实现打字机效果(逐个显示文本)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 效果预览： 处理一些可能出现的逻辑： 逻辑1：用户输入手机号必须满足11位数，如不满足，或输入了其他特殊字符，这些...
- 在有文字提示的时候，想要实现一个字一个字的往外面提示， 下面来介绍一下实现方式 方法一 使用计时器 Typewri...
- 第一种 效果图： 需要准备一张下面的底图，因为我写不出这种分成无数线段的圆。。。 代码： 第二种 效果图： 代码：...
