同名自定义tm-vuetify 2.0.1

tm-quickIndex 快速索引

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<template>
	<view>
		<tm-menubars title="快速索引" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-quickIndex @change="itemClick" :list="list"></tm-quickIndex>
	</view>
</template>
1
2
3
4
5
6
<script>
	export default {
		data() {
			return {
				c_wh:0,
				list: [
					{
						title: "A手机品牌",
						children: [
							{title: " 宝马",icon:'https://picsum.photos/100'},
							{title:  "奔驰",icon:'icon-QQ'},
							{title:  "奔驰"},
							{title:  "奔驰"},
							{title:  "奔驰"},
							{title:  "奔驰"},
							{title:  "奔驰"},
							{title:  "奔驰"},
						]
					},
					{
						title: "B手机品牌",
						index:"B",
						children: [
							{title: " 小米"},
							{title:  "华为"},
							{title:  "OPPO"},
							{title:  "VIVO"},
							{title:  "IQOO"},
							{title:  "COOPAI"},
							{title:  "IHPONE"},
							{title:  "SNASUMG"},
						]
					},
					{
						title: "C电脑品牌",
						index:"C",
						children: [
							{title: " 联想"},
							{title:  "华为"},
							{title:  "OPPO"},
							{title:  "VIVO"},
							{title:  "IQOO"},
							{title:  "COOPAI"},
							{title:  "IHPONE"},
							{title:  "SNASUMG"},
						]
					},
					{
						title: "D脑脑品牌",
						index:"D",
						children: [
							{title: " 联想"},
							{title:  "华为"},
							{title:  "OPPO"},
							{title:  "VIVO"},
							{title:  "IQOO"},
							{title:  "COOPAI"},
							{title:  "IHPONE"},
							{title:  "SNASUMG"},
						]
					},
					{
						title: "E品脑品牌",
						index:"E",
						children: [
							{title: " 联想"},
							{title:  "华为"},
							{title:  "OPPO"},
							{title:  "VIVO"},
							{title:  "IQOO"},
							{title:  "COOPAI"},
							{title:  "IHPONE"},
							{title:  "SNASUMG"},
						]
					},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			itemClick(e){
				uni.$tm.toast(`你点击了${JSON.stringify(e)}`)
			}
		}
	}
</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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

👉props属性表

属性名称类型可选值默认值说明
heightNumber任意数字0高度，默认为0时，自动使用屏幕的高度
value.syncNumber任意数字0当前滚动的索引位置,推荐使用v-model或者value.sync
colorString任意主题色名称primary主题色
listArray[][]列表数据
rang-keyString-title列表数据显示的标签字段

list格式如下

[
	{
		//rang-key默认为title,你可以改成其它自己的字段名。
		title:"汽车品牌",
		//右边显示的索引字符，如果title为空，会以数字索引代替，如果提供了index,
		//则优先显示index字符，否则将匹配title的第一个字符作为索引显示。
		index:"A",
		children:[
			{
				title:"宝马",
				icon:"icon-QQ" //1.1.9新增。列表头像（可选），可以是图标名称或者图片地址
			},
			{title:"奔驰"}
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

技巧提醒

你现在可以通过cell插槽来定义每一项的布局相结构，可完全自己控制快速索引中列表的布局。 极大的提供了个性化。

👉slot插槽

插槽名称返回参数返参类型说明
cell<Badge text="1.1.9"dataObject默认插槽

插槽数据用法如下：

<tm-quickIndex  :list="list">
	<template #cell="{data}">{{data}}</template>
</tm-quickIndex>
1
2
3

data插槽数据结构如下：

{
	prevent:,//父index的索引
	children:,//子项目的index索引
	item:, //子项目数据结构
}
1
2
3
4
5
6

👉事件

事件名称返回参数返参类型说明
@change返回当前点击的数据Object点击列表项时产生的事件

返回的数据格式如下

//  返回参数：
{
	prent:父Index,
	children:子级index,
	data:项目数据。
}
1
2
3
4
5
6
7

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑 报错？ | 评论？