小程序之css传参

HTML

<view  style="--width:{{width}}px;--timer:{{timer}}s;">
    <view class="marquee_text" style="font-size:{{size}}px">{{text}}</view>
</view>

css

@keyframes move {
  from {   margin-left: 100%;  }
  to {   margin-left: var(--width);   /* var接受传入的变量 */  }
}

.marquee_text{
  display: inline-block;
  margin-left: 100%;
  white-space: nowrap;
  animation: move var(--timer)  infinite linear;
  font-weight: bold;background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2025728819,3580500436&fm=26&gp=0.jpg');background-size: contain; -webkit-background-clip: text;color: transparent;
}

js

Page({
  data: {
    text: '成都近日新增确诊新冠患者3例，请大家做好防护，外出请戴好口罩！',
    size: 14,//宽度即文字大小
    moveTimes: 8,//刚好文字宽度等于屏幕宽度所需的时间
    width: 0,//文字宽度
    timer: 0 //滚动时间
  },
  onLoad: function () {
    var screenW = wx.getSystemInfoSync().windowWidth;//获取屏幕宽度
    var contentW = this.data.text.length * this.data.size;//获取文本大概宽度
    var timer = (contentW / screenW) * this.data.moveTimes;//动态计算文字滚动时间
    timer = timer < 8 ? 8 : timer; //判断时间是否小于8s
    this.setData({ width: -contentW, timer: timer });
  }
})

参考 参考链接