更新记录

1.0.1（2021-09-10）

第一次提交

平台兼容性

通过插槽，可完成大部分自定义需求

相关代码,可下载示例

<template>
    <view class="content">
        <!-- 基础用法 -->
        <y-time-line >
            <y-time-line-item v-for="(item,index) in datas"
            :key="index"
            :showLine="datas.length-1===index?false:true"
            >
                <view>
                    {{item.content}}
                </view>
            </y-time-line-item>
        </y-time-line>
        <!-- 自定义颜色高度 -->
        <y-time-line :minHeight="150">
            <y-time-line-item v-for="(item,index) in datas"
            :key="index"
            :showLine="datas.length-1===index?false:true"
            :color="item.color"
            :title="item.title"
            >
                <view>
                    {{item.content}}
                </view>
            </y-time-line-item>
        </y-time-line>
        <!-- 插槽 -->
        <y-time-line :minHeight="150">
            <y-time-line-item v-for="(item,index) in datas"
            :key="index"
            :showLine="datas.length-1===index?false:true"
            :color="item.color"
            :lineStyle="{
                margin:'0 80rpx'
            }"
            >
            <!-- 插槽 -->
            <template v-slot:title>
                <view>插槽</view>
            </template>
            <template v-slot:dot>
                <view class="cu-dot">{{item.title}}</view>
            </template>
                <view class="card">
                    222
                </view>
            </y-time-line-item>
        </y-time-line>
        </view>
</template>

<script>
    export default {
        data() {
            return {
                datas:[
                    {
                        title:"西瓜",
                        content:"西瓜2毛5",
                        color:"red",
                    },{
                        title:"苹果",
                        content:"苹果2毛5",
                        color:"yellow"
                    },{
                        title:"香蕉",
                        content:"香蕉2毛5",
                        color:"blue"
                    },{
                        title:"梨子",
                        content:"梨子2毛5"
                    },
                ]
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style scoped>
    .content {
        padding: 40rpx;
    }
    .cu-dot{
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        white-space: nowrap;
    }
    .card{
        border: 1px solid #C0C0C0;
        margin-bottom: 20rpx;
        min-width: 300rpx;
        min-height: 200rpx;
    }
</style>

time-line Prop

time-line-item Prop

slot