微信小程序之文字淡入

1. 效果图

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

2. 代码

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中进行如下的判断来改变样式

<text class="{{idx===nowActive?'text-active':'text-no-active'}}">{{item}}
</text>

3. other

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

微信小程序之文字淡入相关推荐

c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
微信小程序设置文字样式white-space失效
微信小程序中的换行今天遇到了一个多段文字展示的效果,试了很多种方法设置样式等都实现不了,最后发现,在微信小程序中,不能使用view为文字做换行等操作 HTML中的换行可以直接使用标签,但是微信小程 ...
微信小程序实现文字转语音
很多现有的语音转化都只支持web端和app,如百度和谷歌等: SpeechSynthesisUtterance:https://blog.csdn.net/Qcg0223/articl ...
微信小程序图片文字敏感内容验证获取小程序accessToken
直接上代码:代码中有解释. 一下是验证文字的静态方法直接调用就行. //文字安全检测 (accessToken是微信小程序的APPID和scret获取的)public static Boolean m ...
微信小程序识别图片并提取文字_微信小程序(图像识别,文字识别)
1. ''你知道为什么海水是蓝色的吗?''''因为海里有鱼''''有鱼跟海水是蓝的有毛关系''''因为鱼会吐泡泡..''''??''''吐泡泡就是..卟噜(blue)卟噜(blue)卟噜(blue)卟 ...
[已解决]微信小程序 canvas 文字样式错乱问题
在微信小程序中使用canvas绘制海报的时候,发现有多种不同的样式文字时, 保存canvas内容为图片,出现各种文字样式错乱. ------------------------------------ ...

微信小程序之文字淡入

1. 效果图

2. 代码

3. other

微信小程序之文字淡入相关推荐

最新文章

热门文章