使用css实现时间线布局(TimeLine)

前言

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

使用css实现时间线布局(TimeLine)_第1张图片使用css实现时间线布局(TimeLine)_第2张图片

 

 

实现

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

第一种:使用css伪类实现;

第二种:使用纯css实现。

具体演示代码

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

1、样式文件

2、布局文件


	
		
			
			
				4月22日(周二) 18:00-19:00
				
					教练:David Beckham
					地点:西沙群岛 · 永兴岛
					教室:A教室
					
					取消请假
				
			
		
	

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

1、样式文件

2、布局文件


	
		
			
			
			
				4月22日(周二) 18:00-19:00
				
					教练:David Beckham
					地点:西沙群岛 · 永兴岛
					教室:A教室
					
					取消请假
				
				
			
		
	

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

你可能感兴趣的:(微信小程序,uni-app,css,前端)