微信小程序短文字居中,長文字跑馬燈效果 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序短文字居中,長文字跑馬燈效果

發表時(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)
}
},


相關案例查看更多