wechatide://minicode/D93ZS9m57jS0
代码如下
<view class="intro">{{text}}<text hidden='{{cursor}}'>|</text></view>
|
const app = getApp()
const keyboard = wx.createInnerAudioContext();
keyboard.src= "/keyboard.mp3";
keyboard.loop = true;
Page({
data: {
text:"",
cursor:false,
},
arr:'我们欢迎你的到来,abdewofe dl soo 99,22'.split(""),
key:0,
onLoad: function () {
var that =this;
this.twinkle_start();
keyboard.play();
that.show_text(that.key);
},
show_text:function(key){
var that = this;
if(key>=that.arr.length){
that.twinkle_stop();
keyboard.stop();
return;
}
that.setData({
text: that.data.text + that.arr[key]
})
setTimeout(function () {
that.show_text(key+1);
}, 500);
},
twinkle_start:function(){
this.run_twinkle = true;
this.twinkle_cursor();
},
twinkle_stop:function(){
this.run_twinkle = false;
this.setData({
cursor: true,
})
},
twinkle_cursor:function(){
if(!this.run_twinkle){
return ;
}
var that = this;
this.setData({
cursor: !that.data.cursor
})
setTimeout(function () {
that.twinkle_cursor();
}, 600);
}
})
|
这个效果不错，估计可以用来模拟input组件
谢谢分享
正想做一个这个效果
代码片段没了呀，我还想学习习
厉害，值得学习
onLoad中的方法写在onReady中更好一些
嘿嘿，打字速度设成50比较合适
打字速度500ms，闪烁速度600ms，可以自己调节
每次输出的时候，光标是常亮的。 停止输入了光标才开始闪烁