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

WXML

<view class="index_wrap" style='height:500rpx;'>
   <view class="index_story_text">{{text}}</view>
</view>

JS

// pages/ceshi/ceshi.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    text:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    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);
      }
    }, 1000)

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

公众号：

微信：

来源：CSDN

作者：allen_csdns

链接：https://blog.csdn.net/allen_csdns/article/details/103456947