微信小程序之文字淡入

1. 效果图

实现的效果大概如上所示，文字能够想打字一样，或者说文字的淡入

2. 代码

js

Page({
     
  data: {
     
    // 展示文本
    orginText:"《雁邱词》 元好问 问世间情是何物，直教生死相许。天南地北双飞客，老翅几回寒暑。欢乐趣，离别苦，就中更有痴儿女。君应有语，渺万里层云，千山暮雪，只影向谁去。横汾路，寂寞当年箫鼓，荒烟依旧平楚。招魂楚些何嗟及，山鬼暗啼风雨。天也妒，未信与，莺儿燕子俱黄土。千秋万古，为留待骚人，狂歌痛饮，来访雁邱处。",
    //文字切割后的数组
    text:[],
    //当前展示的字符索引
    nowActive:0,
  },
  onLoad() {
     
    var _this=this;
    var words=_this.data.orginText.split('');
    for(var i=0;i<words.length;i++){
     
      (function(j){
     
        setTimeout(()=>{
     
          _this.setData({
     
          text:words.slice(0,j+1),
          nowActive:j,
        })
      },100*j)
      })(i)
    }
  },
})

wxml

<view>
  <view style="text-indent: 2rem;">
    <block wx:for="{
      {text}}" wx:for-index="idx" wx:for-item="item">
     <text class="{
      {idx===nowActive?'text-active':'text-no-active'}}">
        {
    {item}}
     text>
    block>
  view>
view>

.text-active{
     
  line-height: 18px;
  font-size: large;
  text-indent: 2rem;
  display: inline-block;
}
.text-no-active{
     
  line-height: 18px;
  text-indent: 2rem;
  display: inline-block;
}

大致思路：

通过对文本的切割，切割成一个个字，如果有的文本需要换行展示，这里可以先对文本切割成一行一行的，在对每一行做这样的切割成一个个字。

在wxml中我们用text标签对每个字进行展示，通过setDate对text数组每隔100ms进行改变。为实现新加字的不同样式，我们需要nowActive来索引当前加载的字，前面我们已经对每个字进行切割，在wxml中进行如下的判断来改变样式

        {
    {item}}

3. other

详细代码，码云 ：Gitee
代码片段：微信代码片段