使用css实现时间线布局（TimeLine）

前言

在使用uni-app开发微信小程序过程中，遇到了时间轴布局，由于每项的内容高度不一致，使用uniapp自带的扩展组件uni-steps，样式布局无法对齐竖线，于是自己造轮子，完成特殊的布局。显示效果如下：

实现

实现这种布局，有两种实现方式，

第一种：使用css伪类实现；

第二种：使用纯css实现。

具体演示代码

第一种方式：使用css伪类实现。效果如图一

1、样式文件

<style scoped lang="scss">
.timeline{
	margin: 64rpx auto 0rpx auto;
	position: relative;
	width: 100%;
	 
	
	&:before{
		background-color: #6DD1C9;
		content: '';
		margin-left: -1rpx;
		position: absolute;
		top: 0rpx;
		left: 14rpx;
		width: 2rpx;
		bottom: -250rpx;
		height: calc(100% - 47rpx);
	}
	
	.timeline-event{
		 position: relative;
	}
	
	.timeline-event-copy {
		padding: 32rpx 24rpx;
		position: relative;
		top: -47rpx;
		left: 42rpx;
		width: 536rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
	
	.timeline-event-icon{
		background-color: #ffffff00;
		outline: 0rpx solid #FF0000;
		display: block;
		margin: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 28rpx;
		height: 28rpx;
	}
	
	.timeline-event-thumbnail{
		color: #38254D;
		font-weight: bold;
		font-size: 30rpx;

		display: inline-flex;
		width: 100%;
		margin-bottom: 0rpx;
		align-items: center;
		justify-content: space-between;
	}
	
	.timeline-event-content{
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		
		text{
			font-size: 26rpx;
			color: #574966;
			line-height: 40rpx;
		}
		
		.btn{
			align-self: flex-end;
			font-size: 26rpx;
			color: #F06245;
			line-height: 60rpx;
			text-align: center;
			
			margin-top: -40rpx;
			width: 140rpx;
			height: 60rpx;
			border: 1rpx solid #F06245;
			border-radius: 30rpx;
		}
	}
}
</style>

2、布局文件

<view class="timeline">
	<block v-for="(item,index) in 4" :key="index">
		<view class="timeline-event">
			<image class="timeline-event-icon" src="/static/record/table.png"></image>
			<view class="timeline-event-copy">
				<view class="timeline-event-thumbnail">4月22日(周二) 18:00-19:00</view>
				<view class="timeline-event-content">
					<text>教练：David Beckham</text>
					<text>地点：西沙群岛 · 永兴岛</text>
					<text>教室：A教室</text>
					
					<view v-if="index==0" class="btn">取消请假</view>
				</view>
			</view>
		</view>
	</block>
</view>

第二种方式：使用纯css实现。效果如图二

1、样式文件

<style lang="scss">
.timeline-list{
    margin: 32rpx;
    font-size: 28rpx;
    list-style: none;
}
.timeline-item:last-child .timeline-item_tail {
    display: none;
}
.timeline-item{
    position: relative;
    padding-bottom: 20rpx;
}
.timeline-item_tail{
    position: absolute;
    left: 4rpx;
    height: 100%;
    border-left: 2rpx solid rgba(109, 209, 201, 0.3);
}
 
.timeline-item_node{
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -12rpx;
    width: 22rpx;
    height: 22rpx;
    background: #fff;
    border:6rpx solid #6DD1C9;
}
.timeline-item_wrapper{
    position: relative;
	padding: 32rpx 24rpx;
	left: 42rpx;
    top: -32rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	width: 600rpx;
}
.timeline-item_timestamp{
    color: #38254D;
    font-weight: bold;
    font-size: 30rpx;    
	line-height: 32rpx;
}
.timeline-item_content{
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	
	text{
		font-size: 26rpx;
		color: #574966;
		line-height: 40rpx;
	}
	
	.btn{
		align-self: flex-end;
		font-size: 26rpx;
		color: #F06245;
		line-height: 60rpx;
		text-align: center;
		
		margin-top: -40rpx;
		width: 140rpx;
		height: 60rpx;
		border: 1rpx solid #F06245;
		border-radius: 30rpx;
	}
}
</style>

2、布局文件

<view class="timeline-list">
	<block  v-for="(item, index) in 3" :key="index">
		<view class="timeline-item">
			<view class="timeline-item_tail"></view>
			<view class="timeline-item_node"></view>
			<view class="timeline-item_wrapper">
				<view class="timeline-item_timestamp">4月22日(周二) 18:00-19:00</view>
				<view class="timeline-item_content">
					<text>教练：David Beckham</text>
					<text>地点：西沙群岛 · 永兴岛</text>
					<text>教室：A教室</text>
					
					<view v-if="index==0" class="btn">取消请假</view>
				</view>
				
			</view>
		</view>
	</block>
</view>

ps：使用方式1，无法隐藏最后一项的时间线，而第二种方式，可以随时控制每一项的时间线。个人推荐第二种方式。