微信小程序短文字居中,長文字跑馬燈效果
發表時(shí)間:2021-3-31
發布人(rén):融晨科技
浏覽次數:33
Html代碼
<view class="info_box_happy">
<view class="info_box_happy_txt" style="width: {{textW}}px;margin-left: {{textL}}px">{{textN}}view>
view>
Css代碼
.info_box_happy{
font-size: 12px;
color: #333;
white-space : nowrap;
padding: 10rpx 3rpx;
background: #fff;
border-bottom: 2rpx #f5f5f5 solid;
position: relative;
overflow: hidden;
width: 100%;
}
.info_box_happy_txt{
color: red;
width: 100%;
position: relative;
}
Js代碼
page{
textM:0,
textN:'元旦快樂!元旦快樂!元旦快樂!元旦快樂!',
textW:0,
textL:50,
}
onLoad: function (options) {
var that = this;
var textM = 20;
//獲取屏幕寬度的(de)封裝方法
var phoneWidth = util.nowPhoneWH()[0];
//文字寬度=文字長度+字體大(dà)小
var textW = parseInt(Number(that.data.textN.length)*12);
that.setData({textW:textW,textL:phoneWidth});
if(phoneWidth>textW){
var centerL = Number(phoneWidth/2)-(Number(textW)/2)
that.setData({textL:centerL});
}else{
var textTime = setInterval(function(){
var textL = that.data.textL;
if(textL<-(textW-20)){
that.setData({textL:phoneWidth})
return
}
textL-=2;
that.setData({textL:textL})
},30)
}
},