微信小程序--基于CSS3 animation，公告类滚动-可配置组件

组件调用：
<announcement xxx = "{{xxx}}" ></announcement>

滚动组件：
结构
<view class='notice-content'>
  <view class='notice-text' style='width:{{tipsWidth}}rpx;--countWidth--:{{-tipsWidth}}rpx;--duration--:{{speed}}s;--left--:{{clientwidth}}rpx'>{{comTipsOpts.tipsContent}}</view>
</view>
样式：
.notice-content {
  overflow: hidden;
  position: relative;
  height: 61rpx;
  margin-left: 10rpx
}

.notice-text {
  font-size: 28rpx;
  line-height: 61rpx;
  position: absolute;
  color: #ffa321;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--duration--);  /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}

@keyframes around {
  0% {
    left: var(--left--);
  }
  100% {
    left: var(--countWidth--);
  }
}
js：
Component({
  /**
   * 组件的属性列表
   * 
   * comTipsOpts：{
   *  tipsContent 需要展示的文案--必传
   *  speedFactor 速度系数（文案length*系数=播放速度）
   *  clientwidth 视口宽度（rpx）
   *  fontSize 字体大小（rpx）
   * }
   */
  properties: {
    comTipsOpts:{
      type:Object,
      default:{
        tipsContent: "微信小程序--基于CSS3 animation，公告类滚动-可配置组件",
        speedFactor: 0.45,
        clientwidth: 700,
        fontSize:24
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tipsWidth: "",
    speed:20,
    clientwidth:""
  },
  attached() {
    let fontLength = this.data.comTipsOpts.tipsContent.split("").length
    this.setData({
      tipsWidth: fontLength * this.data.comTipsOpts.fontSize,
      speed: fontLength * this.data.comTipsOpts.speedFactor,
      clientwidth: this.data.comTipsOpts.clientwidth
    })
    console.log(this.data.comTipsOpts.tipsContent)
  },
})