實現一個微信小程序組件：文字跑馬燈效果

 

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

 

 

 

轉 : https://www.jianshu.com/p/0ff03e5e942e