weex实现时间轴组件

本文主要是介绍weex实现时间轴组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

时间轴组件代码 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>

 

 

这篇关于weex实现时间轴组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---