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

最新推荐文章于 2024-08-24 08:19:05 发布

poetPg

最新推荐文章于 2024-08-24 08:19:05 发布

阅读量8.4k

点赞数 5

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_42488404/article/details/82381164

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在微信小程序中实现文字逐个显示的效果。通过使用setInterval方法结合setData更新视图，使得文本能够逐字符展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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