更新记录

0.0.1（2026-02-02） 下载此版本

基于业务抽取而来，效果就如截图一样 如有差距，可自行下载源码进行修改

平台兼容性

uni-app(4.87)

uni-app x(5.0)

wm-timeline

<!-- 数据源 -->
    data: { 
        type: Array,
        default: () => []
    },
    <!-- 自定义样式 给最外层的 item  -->
    customItemStyle: {
        type: Object,
        default: () => {}
    },
    <!-- 如果有子级 子级的渲染字段 -->
    dataChild: {
        type: String,
        default: 'childern'
    },
    <!-- 是否显示 时间线 -->
    showDotLine: {
        type: Boolean,
        default: true
    },
    <!-- 显示圆点还是自定义图片路径（本地路径） -->
    dotType: {
        type: String,
        default: 'dot' // dot - image路径
    },
    <!-- dot 的颜色 -->
    dotColor: {
        type: String,
        default: '#02A6FB'
    },
    <!-- 线的颜色 -->
    lineColor: {
        type: String,
        default: '#02A6FB'
    },
    <!-- dot 的大小 -->
    dotSize: {
        type: Number, // 单位 rpx
        default: 20
    },
    <!-- 线的宽度 -->
    lineWidth: {
        type: Number, // 单位 rpx
        default: 1
    }
<!-- ------------------------------------------ -->
<template>
    <view class="wm-main">
        <view style="font-size: 32rpx">1. 默认显示</view>
        <WmTimeline :data="data" />
        <view style="font-size: 32rpx">2. 自定义 dot 图标</view>
        <WmTimeline :data="data" :dotType="dotType" @click="handleItem" @childclick="handleChildItem" />
        <view style="font-size: 32rpx">3. 自定义dot 图标 并且不显示子级</view>
        <WmTimeline
            :data="data"
            :dotType="dotType"
            :dotSize="30"
            dataChild="aaa"
            :customItemStyle="{ background: 'pink' }"
        />
        <view style="font-size: 32rpx">4. 不显示时间线 自定义 背景色</view>
        <WmTimeline :data="data" :showDotLine="false" :customItemStyle="{ background: 'red' }" />
    </view>
</template>

<script>
export default {
    name: 'WmTimeline', // 时间线
    data() {
        return {
            dotType: require('@/static/logo.png'),
            data: [
                {
                    id: 0,
                    title: '标题1',
                    content: '内容1内容1内容1内容1内容1内容1内容1',
                    childern: [
                        {
                            id: 100,
                            title: '标题100',
                            content: '内容100内容100内容100内容100内容100内容100内容100'
                        },
                        {
                            id: 200,
                            title: '标题200',
                            content: '内容200内容200内容200内容200内容200内容200内容200'
                        }
                    ]
                },
                {
                    id: 1,
                    title: '标题2',
                    content: '内容2内容2内容2内容2内容2内容2内容2'
                }
            ]
        };
    },
    onLoad(params) {},
    methods: {
        handleItem(item, index) {
            console.log('item , index ', item, index);
        },
        handleChildItem(items, indexs, item, index) {
            console.log('items,indexs,item,index ', items, indexs, item, index);
        }
    },
    computed: {},
    watch: {}
};
</script>