tm-timeline 时间轴
提醒
本组件1.1.2版本提供
主要应用场景：企业年历、事件经过、物流、地铁时刻表等具有过程的应用场景。
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<template>
<view>
<tm-menubars title="时间轴" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24 ">时间轴中</view>
<tm-timeline :list="list" ></tm-timeline>
</tm-sheet>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24 ">时间轴左</view>
<tm-timeline :list="list" model="left"></tm-timeline>
</tm-sheet>
<tm-sheet :shadow="24">
<view class="text-size-s text-weight-b mb-24 ">时间轴右</view>
<tm-timeline :list="list" model="right"></tm-timeline>
</tm-sheet>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
export default {
data() {
return {
list:[
{
title:'',
content:'我是内容我是内容我是内容',
time:"2020年7月",
color:"blue",
borderColor:'blue'
},
{
title:'说明文字',
content:'我是内容我是内容我是内容',
time:"2019年7月",
color:"green",
borderColor:'green',
icon:'icon-QQ',
size:36
},
{
title:'说明文字',
content:'我是内容我是内容我是内容',
time:"2018年7月",
color:"red"
},
{
title:'说明文字',
content:'我是内容我是内容',
time:"2017年7月",
color:"green",
icon:'icon-position-fill',
iconSize:36,
size:36
},
]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| color | String | 任意主题色名称 | primary | 主题背景色 |
| model | String | left/center/right | center | 时间轴的方向 |
| border-color | String | 任意主题色名称 | grey-lighten-2 | 默认线的颜色 |
| reverse | Boolean | true/false | false | 是否反转数据 |
| size | Number | 任意整数 | 24 | 默认的节点大小，单位upx |
| list | Array | 见下方 | [] | 数据 |
list结构
[
// 以下是最全的结构，除了content字段为必要，其它字段均可忽略。
{
title:'',//标题
content:'',//内容
size:24,//节点大小，字段，不存在时，使用默认的值。,单位upx
time:"",//时间标题
color:"",//主题色，默认primary
borderColor:''//如果此字段没有，将使用默认的。
icon:'icon-position-fill',//圆点中的图标
iconSize:36,//圆点中图标的大小，默认为24,单位upx
}
]
//下方是最简单的结构。
[
{
content:'',//内容
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
👉更新日志
2021年8月30日 初始版本。