微信小程序短文字居中,长文字跑马灯效果
发表时间:2021-3-31
发布人:葵宇科技
浏览次数:32
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;
//获取屏幕宽度的封装方法
var phoneWidth = util.nowPhoneWH()[0];
//文字宽度=文字长度+字体大小
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)
}
},