【微信小程序】实现文字按照次序逐个自动显示出来
作者：互联网
【应用初衷】在做的小程序项目中，有一个需求需要实时显示已读的内容，定位读到哪里了，由此才联想到使用这样一个功能。从看了很多的文章资料发现一个头疼的问题，没效果图，不够直接展示实现的功能，那我这里就先放一个效果图，看是否符合，不符合就直接跳过吧。。。
【效果图】
废话不多说，直接上代码。。。
【代码模块】
核心逻辑主要涉及到两个文件 [.wxml]、[.js]，可根据实际情况加些样式之类的，这里简单列举核心代码：
[.wxml]：
<view>
<view>{{text}}</view>
</view>
[.js]
Page({
/*页面的初始数据*/
data: {},
/*生命周期函数--监听页面加载*/
onLoad: function (options) {},
/*生命周期函数--监听页面初次渲染完成*/
onReady: function () {
var that=this;
/************ 文字逐个显示 ************/
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);
},
/*生命周期函数--监听页面显示*/
onShow: function () {},
/*生命周期函数--监听页面隐藏*/
onHide: function () {},
/*生命周期函数--监听页面卸载*/
onUnload: function () {},
/* 页面相关事件处理函数--监听用户下拉动作*/
onPullDownRefresh: function () {},
/*页面上拉触底事件的处理函数*/
onReachBottom: function () {},
/*用户点击右上角分享*/
onShareAppMessage: function () {}
})
直接拷贝到项目里就可以测试看看啦~~
标签：function,微信,周期函数,次序,var,text,逐个,监听,页面 来源： https://blog.csdn.net/csdncsdn_csdncsdn/article/details/106919926