微信小程序短文字居中,长文字跑马灯效果 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:25


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)
}
},


相关案例查看更多