效果圖

.wxml

<view class="tips"><text>{{ tipsText }}</text><text class="tips-line">|</text>
</view>

.wxss

.tips{padding: 50rpx 100rpx;font-size: 28rpx;
}
.tips-line{color: #ccc;animation: tips-line .5s alternate infinite;
}@keyframes tips-line{from{opacity: 0;}to{opacity: 1;}
}

.js

Page({data: {tipsText:''},executeTips(){const that = thisconst tipsArr = ['寫下你的一個夢想，并思考實現它的第一步。','嘗試用新的方式來解決一個舊問題。',],len = tipsArr.length - 1;let i = -1,key = 0,type = 0,o,max,tipsText = '';function fn(){if(type === 0){i = i < len ? i + 1 : 0o = tipsArr[i]max = o.lengthtype = 2fn()} else if(key < max || type === 1){setTimeout(() => {if(type === 2) tipsText += o[key],key++else tipsText = tipsText.slice(0,tipsText.length - 1),key--that.setData({ tipsText })if(key === 0) type = 0fn()}, type * 100)}else setTimeout(() => { type = 1,fn() },2000)}fn()},onLoad(){this.executeTips()}
})

遇到問題可以看我主頁加我Q，很少看博客，對你有幫助別忘記點贊收藏。