背景
总有许许多多的事件需要记录~~因此编写了自定义时间轴组件满足一些相关需求
效果
组件代码
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: "张三"
}
]
备注
时间轴相关内容的布局设计需根据实际场景自定义~~