实现一个微信小程序组件：文字跑马灯效果

项目未动，组件先行

废话不多说，直接上代码

• marquee.json

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

• marquee.wxml

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

• marquee.wxss

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

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

• marquee

// 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();
  }
})

以上就是我定义在components文件夹的组件，剩下就是引用组件

• demo.json

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

• demo.wxml

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

就这样可以了

参考资料

• 手把手教你实现微信小程序中的自定义组件