微信小程序·自定义时间轴组件

背景

总有许许多多的事件需要记录~~因此编写了自定义时间轴组件满足一些相关需求

效果

组件代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    steps: {
      type: Array,
      value: []
    },
    activeClass: {
      type: String,
      value: ''
    },
    activeBgColor: {
      type: String,
      value: '#000'
    },
    activeBdColor: {
      type: String,
      value: '#fff'
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

<view class="item-content {{activeClass}}">
  <view class="icon-content">
    <text class="out-icon" style="background-color: {{iconStyle.getBgColor(activeClass, activeBgColor)}}; border-color: {{iconStyle.getBgColor(activeClass, activeBdColor)}};"></text>
    <view class="line"></view>
  </view>
  <view class="content">
    <slot></slot>
  </view>
</view>
<wxs module="iconStyle">
  var getBgColor = function (className, activeBgColor) {
    if (className.indexOf('first') !== -1) {
      return activeBgColor
    } else {
      return
    }
  }
  var getBdColor = function (className, activeBdColor) {
    if (className.indexOf('first') !== -1) {
      return activeBdColor
    } else {
      return
    }
  }
  module.exports = {
    getBgColor: getBgColor,
    getBdColor: getBdColor
  }
</wxs>

.item-content {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.item-content .icon-content {
  height: 100%;
  position: absolute;
  margin-left: -30rpx;
}

.item-content .icon-content .line {
  width: 2rpx;
  height: calc(100% - 20rpx);
  position: absolute;
  background-color: #e5e5e5;
  top: 20rpx;
}

.item-content .icon-content {
  width: 32rpx;
  display: flex;
  justify-content: center;
}

.out-icon {
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  line-height: 20rpx;
  background-color: #e5e5e5;
  z-index: 2;
}

.content {
  margin: -6rpx 0 20rpx 20rpx;
}

.first-item .icon-content .out-icon {
  border: 4rpx solid;
}

.last-item .line {
  display: none;
}

{
  "component": true
}

使用代码

        <view class="content">
            <my-steps wx:for="{{stepList}}" wx:key="index" activeClass="{{index === 0 ? 'first-item' : '' }} {{index === stepList.length-1 ? 'last-item' : '' }}" activeBgColor="pink" activeBdColor="rgb(255, 213, 220)">
                <view class="item {{index === 0 ? 'first-item' : '' }} {{index === stepList.length-1 ? 'last-item' : '' }}">
                	<!-- 具体样式自定义设置 -->
                    <view class="">{{item.eventTime}}</view>
                    <view class="">操作内容：{{item.eventType}}</view>
                    <view class="">
                        <text>操作人：{{item.operatorPerson}}；</text>
                    </view>
                </view>
            </my-steps>
        </view>

        stepList: [
            {
                eventTime: "05-09 00:00",
                eventType: '获取信息',
                operatorPerson: "张三"
            },
            {
                eventTime: "05-09 00:00",
                eventType: '获取信息',
                operatorPerson: "张三"
            },
            {
                eventTime: "05-09 00:00",
                eventType: '获取信息',
                operatorPerson: "张三"
            }
        ]

备注

时间轴相关内容的布局设计需根据实际场景自定义~~