微信小程序文字逐个显示效果

要在微信小程序里实现文字逐个显示效果，不能像html那样直接操作dom，但方法类似，这里使用setInterval的方法。

首先，页面内容如下，要展示的内容为{{text}}。

<view class="index_wrap" style='height:{{winH}}rpx; 
background: url("../../image/1.jpg") no-repeat; 
background-size: 100% 100%;'>   
	<view class="index_story_text">{{text}}</view>
</view>

接着，在js里写定时器并保存text。

1. //文字逐个显示
2. var story = "很久很久以前,有一个国王。";
3. var i= 0;
4. var time = setInterval(function(){
5. var text = story.substring(0, i);
6. i++;
7. that.setData({
8. text: text
9. });
10. if (text.length == story.length) {
11. // console.log("定时器结束！");
12. clearInterval(time);
13. }
14. },200)

来源：CSDN

作者：阿云飘飘Oo

链接：https://blog.csdn.net/qq_43529437/article/details/104427208