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

论坛 期权论坛 脚本     
匿名技术用户   2021-1-16 03:36   263   0

要在微信小程序里实现文字逐个显示效果,不能像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)

这样,一个简单的文字逐个显示效果就实现了。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP