【微信小程序】实现文字按照次序逐个自动显示出来

精选30+云产品，助力企业轻松上云！>>>

【应用初衷】在做的小程序项目中，有一个需求需要实时显示已读的内容，定位读到哪里了，由此才联想到使用这样一个功能。从看了很多的文章资料发现一个头疼的问题，没效果图，不够直接展示实现的功能，那我这里就先放一个效果图，看是否符合，不符合就直接跳过吧。。。

【效果图】

废话不多说，直接上代码。。。

【代码模块】

核心逻辑主要涉及到两个文件 [.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 () {}

})

直接拷贝到项目里就可以测试看看啦~~