微信小程序文字逐个显示效果
2018-09-04 11:43
2261 查看
要在微信小程序里实现文字逐个显示效果,不能像html那样直接操作dom,但方法类似,这里使用setInterval的方法。
首先,页面内容如下,要展示的内容为{{text}}。
[code]<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。
[code] //文字逐个显示 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)
这样,一个简单的文字逐个显示效果就实现了。
阅读更多相关文章推荐
- 微信小程序教程:文字跑马灯效果
- 微信小程序画布圆形进度条显示效果
- 微信小程序例子——如何使用view组件显示文字
- 微信小程序教程:文字跑马灯效果
- 微信小程序Tabbar文字在真机不显示
- 微信小程序实现文字跑马灯效果
- 微信小程序对cover-view标签设置border没效果(手机不显示)
- 微信小程序 - 文字超限断尾显示省略号
- 微信小程序-文字无线轮播效果、文字跑马灯。
- 微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号
- 微信小程序动态显示项目倒计时效果
- 微信小程序中的canvas 文字断行和省略号显示功能的处理方法
- 微信小程序实现指定显示行数多余文字去掉用省略号代替
- 微信小程序之动态改变内容①文字改变②显示隐藏
- 微信小程序-文字跑马灯效果
- 让TextView里面的文字逐个显示的动画效果实现(1)
- 微信小程序 图片在真机不显示跳坑总结
- 12个div逐个显示效果
- HTML5----图片或文字指定位子隐藏到显示动态效果