小程序之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