手机版

微信小程序短文字居中,长文字跑马灯效果

时间:2021-12-11 来源:互联网 编辑:宝哥软件园 浏览:

微信小程序短文字居中,长文字跑马灯效果(图1)

超文本标记语言代码

view class=' info _ box _ happy ' view class=' info _ box _ happy _ txt ' style=' width : { { TextW } } px;边距-左: { { TextL } } px"{ TextN } }视图视图钢性铸铁代码。info _ box _ happy { font-size : 12px;颜色: # 333空白: nowrappadding : 10 rpx 3rpx背景# fffborder-底部: 2r px # f5f 5实心;相对位置:飞越:隐藏;宽度: 100%;}.信息_盒子_快乐_txt{ color:红色;宽度: 100%;相对位置:}Js代码

第{文本:0,文本: '页元旦快乐!元旦快乐!元旦快乐!元旦快乐!',textW:0,textL:50,} onLoad:函数(选项){ var那=thisvar textM=20//获取屏幕宽度的封装方法可变电话宽度=util。nophonewh()[0];//文字宽度=文字长度字体大小var textW=parsent(Number(the。数据。短信。长度)* 12);that.setData({textW:textW,text l :电话宽度});如果(电话宽度textW){ var center=Number(电话宽度/2)-(Number(textW)/2)那。setdata({ textl : centre });} else { var textTime=setInterval(function(){ var textL=that。数据。textL如果(textL-(textW-20)){那。setdata({ textL :电话宽度})返回} TextL-=2;那个。setdata({ textl : textl })},30) } },

版权声明:微信小程序短文字居中,长文字跑马灯效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。