{

  "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:;

}

// 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>