仿uniapp - 时间轴组件

介绍

在uniapp 的开发当中 ,经常会使用到一些组件, 比如时间轴组件, uniapp 内置的时间轴组件如下所示：

需求背景

现在自己所做的项目当中, 所遇到的, 和各个相关的组件都不太一样, 所以,在这里,自己手写了一个时间轴

效果图

主要代码

1. html部分代码：

<view class="history_content">
	<view class="history_content_item" v-for="(item,id) in historyList" :key="id">
		<view class="history_left_item" >
			<view class="item_year">{{item.leftYear}}</view>
			<view class="item_line">
				<view class="item_line_dot"></view>
			</view>
			<view class="item_desc">
				<view class="desc_list" v-for="(list,id) in item.leftItem" :key="id">
					<view class="title">{{list.leftTitle}}</view>
					<view class="word">{{list.leftDesc}}</view>
				</view>
			</view>
		</view>
		<view class="history_right_item" >
			<view class="item_desc">
				<view class="desc_list" v-for="(right,id) in item.rightItem" :key="id">
					<view class="title">{{right.rightTitle}}</view>
					<view class="word">{{right.rightDesc}}</view>
				</view>
			</view>
			<view class="item_line">
				<view class="item_line_dot"></view>
			</view>
			<view class="item_year">{{item.rightYear}}</view>
		</view>
	</view>
</view>

2. css部分代码：

.item_year,  .item_desc {
	flex: 1;
}
 .history_content .history_left_item ,.history_right_item{
	width: 620rpx;
	display: flex;
	flex-direction: row;
}
.history_content .history_left_item .item_year , .history_right_item .item_year {
	background-image: url(../../static/images/about/story/image2.png);
	background-position: 0rpx 10rpx;
	background-repeat: no-repeat;
	background-size: 100% ;
	text-align: center;
	color: #006CFF;
	font-size: 34rpx;
	font-weight: bold;
	padding-top: 50rpx;
}
.history_content .history_left_item .item_line , .history_right_item .item_line{
	width: 4rpx;
	margin: 0 22rpx;
	background-color:#559DFF;
}
.history_content .history_left_item .item_line .item_line_dot , .history_right_item .item_line .item_line_dot  {
	width: 14px;
	height: 14px;
	background-color: #559DFF;
	border-radius: 50%;
	position: relative;
	left: -14rpx;
	top: 60rpx;
}
.history_content .history_left_item .item_desc {
	padding-bottom: 100rpx;
	margin-top: 100rpx;
}
.history_content .history_right_item .item_desc {
	margin-top: 100rpx;
	padding-bottom: 100rpx;
}
.history_content .history_left_item .item_desc .desc_list {
	padding: 0rpx 0 20rpx 20rpx;
}
.history_content .history_left_item .item_desc .desc_list .title ,  .history_right_item .item_desc .desc_list .title{
	font: 24rpx;
	font-weight: 400;
	color: #559DFF;
}
.history_content .history_left_item .item_desc .desc_list .word,  .history_right_item .item_desc .desc_list .word{
	font-size: 24rpx;
	font-weight: 400;
	color: #5F6B82;
}
.history_content .history_right_item .item_desc .desc_list {
	text-align: right;
	padding: 0rpx 20rpx 20rpx 0rpx;
}

3. js 部分代码：

export {
	data() {
		return {
			historyList: [
				{
					id: "0",
					leftYear: '2020年',
					rightYear: "2019年",
					leftItem: [
						{
							id: 0,
							leftTitle: "5月",
							leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						},{
							id: 1,
							leftTitle: "4月",
							leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						}
					],
					rightItem: [
						{
							id: 0,
							rightTitle: "12月",
							rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						},{
							id: 1,
							rightTitle: "9月",
							rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						}
					]
				},	
				{
					id: "1",
					leftYear: '2018年创新',
					rightYear: "2017年发展",
					leftItem: [
						{
							id: 0,
							leftTitle: "12月",
							leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						},{
							id: 1,
							leftTitle: "11月",
							leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						}					
					],
					rightItem: [
						{
							id: 0,
							rightTitle: "12月",
							rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						},{
							id: 1,
							rightTitle: "10月",
							rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'
						}
					]
				},
			]
		}
	}

至此, 就全部结束了, 通过两层循环, 将数据渲染出来即可。