效果图:
时间轴组件代码 TimeLine.vue :
<!-- 时间线 -->
<template>
<div class="list-cell-item" :style="{height: (timeLineHeight)+'px'}">
<div class="leftContent" :style="{ width: (timeLineWith)+'px',height: (timeLineHeight)+'px'}">
<text class="leftContentText" :style="{ width: (timeLineWith/5*4)+'px',height: (timeLineHeight)+'px',lineHeight: (timeLineHeight)+'px'}">{{ timeLineText }}</text>
<div class="lineDiv" :style="{ width: (timeLineWith/5)+'px',height: (timeLineHeight)+'px'}">
<div class="portraitLine" :style="{ marginLeft: (timeLineWith/5/2)+'px',height: (timeLineHeight)+'px'}"></div>
<image class="roundIcon" :style="{ width: (timeLineWith/5)+'px',height: (timeLineWith/5)+'px',marginTop:(timeLineHeight/2-timeLineWith/5/2)+'px'}" src="mipmap://white_circle_icon.png"></image>
</div>
</div>
<div :style="{ width: (750-timeLineWith)+'px',height: (timeLineHeight)+'px'}">
<slot name="cellContent"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
timeLineText: {
type: String,
default:''
},
timeLineWith: {
type: Number,
default:0
},
timeLineHeight: {
type: Number,
default:0
},
},
}
</script>
<style scoped>
.list-cell-item{
width: 750px;
align-items: center;
justify-content: center;
flex-direction: row;
background-color: #fff;
}
.leftContent{
flex-direction: row;
justify-content: space-between
}
.leftContentText{
font-size: 22px;
color: #999;
text-align:center;
}
.lineDiv{
align-items: right;
}
.portraitLine{
width: 2px;
margin-left: 1px;
align-items: center;
justify-content: center;
background-color: #e0e0e0;
}
.roundIcon{
position: absolute;
align-items: center;
justify-content: center;
background-color:white;
justify-content: center;
}
</style>
weex端调用:
import TimeLine './TimeLine.vue'; //引入控件
components: {TimeLine}, //声明控件
<TimeLine :timeLineText="index" timeLineWith="100" timeLineHeight="200" >
<div slot="cellContent"> <!-- 定义slot内容布局 -->
<!-- 添加对应的内容组件 -->
</div>
</TimeLine>