{
  "component": true,
  "usingComponents": {}
}

<!--components/marquee.wxml-->
<view class=\'marquee_container\'>
  <view class=\'marquee_text\' style=\'{{ orientation }}:{{ marqueeDistance }}px;font-size: {{size}}px;\'>
    {{ text }}
  </view>
</view>

/* components/marquee.wxss */
.marquee_container {
  position: relative;  
  width: 100%;
}

.marquee_text {
  position: absolute;
  white-space: nowrap;
  top: 0;
}

// components/marquee.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    text: {
      type: String,
      value: \'ILoveEwei\'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    marqueePace: 1,
    marqueeDistance: 0,
    size: 14,
    orientation: \'left\',
    interval: 20
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _scrolling: function() {
      var _this = this;
      var timer = setInterval(()=> {
        if(-_this.data.marqueeDistance < _this.data.length) {
          _this.setData({
            marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace
          })
        } else {
          clearInterval(timer);
          _this.setData({
            marqueeDistance: _this.data.windowWidth
          });
          _this._scrolling();
        }
      },_this.data.interval);
    }
  },

  created: function() {
    var _this = this;
    var length = _this.data.text.length * _this.data.size;
    var windowWidth = wx.getSystemInfoSync().windowWidth
    _this.setData({
      length: length,
      windowWidth: windowWidth
    });
    _this._scrolling();
  }
})

{
  "usingComponents": {
    "marquee": "../../components/marquee"
  }
}

<marquee text="我爱你我爱你我爱你"></marquee>