TimeLine 时间轴

时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。

平台差异说明

基本使用

• 该组件左边图标默认为显示一个点，如需自定义，请通过name为node的slot传入内容
• 组件右边内容为了更强的自定义，需要请通过name为content的slot传入

以下为基本示例，完整示例请见演示部分

<template>
    <u-time-line>
        <u-time-line-item nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
                <view class="u-node" style="background: #19be6b;">
                    <!-- 此处为uView的icon组件 -->
                    <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
                </view>
            </template>
            <template v-slot:content>
                <view>
                    <view class="u-order-title">待取件</view>
                    <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
                    <view class="u-order-time">2019-05-08 12:12</view>
                </view>
            </template>
        </u-time-line-item>
        <u-time-line-item>
            <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
            <template v-slot:content>
                <view>
                    <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
                    <view class="u-order-time">2019-12-06 22:30</view>
                </view>
            </template>
        </u-time-line-item>
    </u-time-line>
</template>
<style lang="scss" scoped>
    .u-node {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d0d0d0;
    }
    .u-order-title {
        color: #333333;
        font-weight: bold;
        font-size: 32rpx;
    }
    .u-order-desc {
        color: rgb(150, 150, 150);
        font-size: 28rpx;
        margin-bottom: 6rpx;
    }
    .u-order-time {
        color: rgb(200, 200, 200);
        font-size: 26rpx;
    }
</style>

注意事项

如果自定义了左边的图标等内容，有可能左边的图标无法和右边的内容平齐，可以调整time-line-item组件的node-top参数来达到想要的效果

<u-time-line-item node-top="2">
    <template v-slot:node>
        <u-icon name="pushpin-fill" color="#ddd" :size="24"></u-icon>
    </template>
    <template v-slot:content>
        ......
    </template>
</u-time-line-item>

API

TiemLimeItem Props