要在微信小程序里实现文字逐个显示效果,不能像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。
//文字逐个显示
var story = "很久很久以前,有一个国王。";
var i= 0;
var time = setInterval(function(){
var text = story.substring(0, i);
i++;
that.setData({
text: text
});
if (text.length == story.length) {
// console.log("定时器结束!");
clearInterval(time);
}
},200)
这样,一个简单的文字逐个显示效果就实现了。