小程序模板网

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

发布时间:2018-05-02 15:54 所属栏目:小程序开发教程

 

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24181.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询