<template>

<view>

<text>{{text}}</text>

</view>

</template>

<script>

export default {

data() {

return {

text: '', // 文本内容

animation: null // 动画效果

}

},

mounted() {

this.showTextWithTypewriterEffect('这是一段文本内容，将以打字机效果显示。')

},

methods: {

showTextWithTypewriterEffect(str) {

let index = 0

let timer = setInterval(() => {

this.text += str[index]

index++

if (index === str.length) {

clearInterval(timer)

this.animation = uni.createAnimation({

duration: 1000,

timingFunction: 'linear'

}).opacity(1).step()

this.$nextTick(() => {

this.animation.export()

})

}

}, 100)

}

}

}

</script>