微信小程序 跑马灯效果

js : 

/**
   * 页面的初始数据
   */
  data: {
    marquee: {
      width: '',
      text: ''
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const houseString = '马马马马马马马马马马马马';
    var pre = 0;
    for (var i = 0; i < houseString.length; i++) {
      if (houseString.charCodeAt(i) > 255) {// charCode大于255是汉字
        pre++;
      } else {
        pre += 0.5;
      }
    }
    this.setData({
      [`${'marquee'}.text`]: houseString,
      [`${'marquee'}.width`]: pre
    })
  },

wxml: 

<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em">
  <view class="marquee_text">{{marquee.text}}</view>
</view> 

wxss:

/*跑马灯*/
@keyframes around {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: var(--marqueeWidth--);/* var接受传入的变量*/
    }
  }

.marquee_container{
  line-height: 40rpx;
  background-color: #F8F8F8;
  height: 1.2em;
  position: relative;
  width: 100%;
}
.marquee_container:hover{
  animation-play-state: paused; /*不起作用*/
}
.marquee_text{
  font-size: 25rpx;
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}

1