微信小程序自定义组件——跑马灯

引言

基于小程序一直没有跑马灯的组件，自己在抽空的时候做了个跑马灯，效果还不错，可以直接使用。

组件布局

<view class="marquee-wrap" style="width: {{parentWidth - 20}}rpx;">
  <view class="marquee-text" style="width: {{contentWidth}}rpx;font-size: {{fontSize}}rpx;color: {{color}};left: {{left}}rpx;">{{content}}</view>
</view>

组件效果配置

.marquee-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 60rpx;
  overflow: hidden;
  padding: 10rpx;
  background-color: #3b7df5b0;
  align-items: center;
  border-radius: 20rpx;
}
.marquee-text {
  position: absolute;
  top: 10rpx;
  left: 0rpx;
  overflow: hidden;
}

组件代码

// components/marquee/index.js

let marqueeTask = null;

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
      this.startMarquee();
    },
    hide: function() {
      // 页面被隐藏
      this.stopMarquee();
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    content: {
      type: String,
      value: ''
    },
    contentWidth: {// text组件的宽度
      type: Number,
      value: 0
    },
    fontSize: { // 字体大小
      type: Number,
      value: 24
    },
    color: { // 字体颜色
      type: String|Number,
      value: '#333333'
    },
    parentWidth: { // text父组件的宽度
      type: Number,
      value: 0
    },
    left: { // text组件的偏移量
      type: Number,
      value: 0
    },
    timeInterval: { // 移动间隔时间,单位ms
      type: Number,
      value: 180
    },
    distance: { // 每次移动的距离, 单位rpx
      type: Number,
      value: 24
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    startMarquee() {
      console.log('startMarquee parentWidth =' + this.data.parentWidth + '  contentWidth = ', this.data.contentWidth);
      if (this.data.parentWidth >= this.data.contentWidth) {
        return;
      }
      this.stopMarquee();
      marqueeTask = setInterval(() => {
        let left = this.data.left;
        const distance = this.data.distance;
        const width = -this.data.contentWidth;
        left -= distance;
        if (left - distance <= width) {
          left = -width;
        }
        // console.log('startMarquee left = ', left)
        this.setData({
          left
        })
      }, this.data.timeInterval);
    },
    stopMarquee() {
      if (marqueeTask == 0 || marqueeTask) {
        clearInterval(marqueeTask);
        marqueeTask = null;
      }
    }
  }
})

转载请写明原著地址