更新记录

1.0.0(2023-06-29)

更新使用说明

0.0.11(2022-09-09)

修改md

0.0.1(2022-09-09)

首次提交

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.6 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

来妹儿-时间轴 组件

lmTimeline 组件允许您创建一个具有可自定义选项的时间轴。它支持以下属性:

属性名 类型 默认值 描述
lineType 字符串 'center' 确定时间轴线的位置。可选值:'center'(居中对齐)或 'left'(左对齐)
height 字符串 '1500rpx' 指定时间轴组件的高度。
initData 数组 详见下文* 设置时间轴的初始数据。数组中的每个项表示一个时间轴事件。

* initData 的默认值为:

[
    {
        time: '2020-6-24',
    },
    {
        time: '2020-7-24',
        direction: 'right'
    },
    {
        time: '2020-7-24',
    },
]

插槽

lmTimeline 组件提供了两个插槽,用于自定义时间轴项的外观:

  1. dot:此插槽用于自定义显示在时间轴上的点元素。它接收以下属性:

    • data:与时间轴项关联的数据对象。
    • index:时间轴项在 initData 数组中的索引。
  2. item:此插槽用于自定义时间轴项的内容。它接收与 dot 插槽相同的属性。

示例用法

<template>
    <view>
        <view>
            <lm-timeline :initData="dataList" height="2000rpx" lineType="left" style="margin: 10px;">
                <template #item="{data,index}">
                    <uni-card :border="false" shadow="0px 1px 16px 1px rgba(0, 0, 0, 0.08)" style="margin-left: 25px;">
                        <h3>{{data.time}}</h3>
                        <p>1234</p>
                    </uni-card>
                </template>
            </lm-timeline>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList:[
                    {
                        time: '2020-7-21',
                        direction:'right'
                    },
                    {
                        time: '2020-7-22',
                        direction:'right'
                    },
                    {
                        time: '2020-7-23',
                        direction:'right'
                    }
                ]
            }
        },
        methods: {
        }
    }
</script>

<style>

</style>

请注意:上述示例是使用 <lm-timeline> 组件创建一个时间轴,并在每个时间轴项中使用 <uni-card> 组件进行自定义内容显示。您可以根据需要自定义时间轴项的外观和样式。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问