tm-sliderNav 侧边导航
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-sliderNav :list="list" ></tm-sliderNav>
1
<script>
export default {
data() {
return {
list:[
{title:'苏州'},
{title:'北京'},
{title:'广东',disabled:true},
{title:'江西',dot:8},
{title:'深圳'},
]
}
},
methods: {
}
}
</script>
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
默认选中的小技巧
可以通过props rang-key来改变数据结构方式，以避免使用默认的结构。
具体看如下示例:
<tm-sliderNav rang-key="text" :list="list2" text color="red" ></tm-sliderNav>
1
<script>
export default {
data() {
return {
list2:[
{text:'苏州'},
{text:'北京'},
{text:'广东',disabled:true},
{text:'江西',dot:8},
{text:'深圳'},
]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
👉完整的示例
可以复制到页面直接运行
<template>
<view>
<tm-menubars title="侧边导航" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">基础示例</view>
<tm-sliderNav @change="change" :list="list" ></tm-sliderNav>
</tm-sheet>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">可以自己设置宽度</view>
<tm-sliderNav :width="120" @change="change" rang-key="text" :list="list2" text color="red" ></tm-sliderNav>
</tm-sheet>
<tm-sheet black>
<view class="pa-12 text-size-s text-weight-b text mb-32 ">暗黑模式</view>
<tm-sliderNav @change="change" black :list="list" text color="red" ></tm-sliderNav>
</tm-sheet>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
export default {
data() {
return {
list:[
{title:'苏州'},
{title:'北京'},
{title:'广东',disabled:true},
{title:'江西',dot:8},
{title:'深圳'},
],
list2:[
{text:'苏州'},
{text:'北京'},
{text:'广东',disabled:true},
{text:'江西',dot:8},
{text:'深圳'},
]
}
},
methods: {
change(e){
uni.$tm.toast(`您选中了:${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
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
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| height | Number | 任意数字 | 0，父组件的高度 | 单位upx,自动使用父组件的高度 |
| width | Number | 任意数字 | 190 | 单位upx,宽度 |
| round | Number | 任意数字 | 4 | 单位upx,圆角 |
| rang-key | String | - | title | 数据结构对象中，需要展示标签的key，比如list中[{text:"水果",id:1}],那么rangKey='text' |
| color | String | 任意主题色名 | primary | 主题色名 |
| bg-color | String | 任意主题色名 | grey-lighten-5 | 未选择时的背景色 |
| font-color | String | 任意主题色名 | grey-darken-1 | 未选中时的文字颜色 |
| font-size1.1.6 | String/Number | 任意整数 | 28 | 项目字号单位rpx |
| text | Boolean | true/false | false | 使用主题文本色为高亮色 |
| black | Boolean | true/false | false | 是否暗黑模式 |
| dot | Boolean | true/false | false | 是否显示角标数字 |
| list | Array | [] | [] | 数据列表,结构见下方，只要是对象即可。 |
下面是解释rang-key和list数据结构的关系
[
{
title:'苏州', //标题，必须， rang-key默认为title
id:1 , //唯一 标识符，必须
dot:8,//显示角标的数字 【可选】
disabled:true//是否禁用选项 【可选】
}
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | 返回当前选中的索引index | Number | 每次选择变化都会触发 |
👉更新日志
2021年8月20日14:8:5 初始版本。