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>