tm-bottomnavigation 底部导航工具栏
提醒
此工具栏非顶部导航工具栏，这就是tabar。但它的功能位置有三种：top,bottom,static。可以实现你不同的作用功能。
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-bottomnavigation icon-color="red" :list="list_1"></tm-bottomnavigation>
1
<script>
export default {
data() {
return {
list_1: [
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/elf-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/house-snowglobe-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/gift-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/christmas-tree-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/tree-freebie-icon.png', value: '标题' }
],
}
},
methods: {}
}
</script>
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
👉完整的示例
可以复制到页面直接运行
<template>
<tm-fullView>
<template v-slot:default="{ info }">
<view class="grey text " :class="tmVuetify.black ? 'black bk' : ''" :style="{ minHeight: info.height + 'px' }">
<tm-menubars title="导航工具栏" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<view><tm-bottomnavigation icon-color="red" :list="list_1"></tm-bottomnavigation></view>
<!-- #ifdef H5 -->
<tm-bottomnavigation
bg-theme="bg-gradient-blue-accent"
position="top"
border="bottom"
:top="navTop"
icon-color="yellow"
icon-color-grey="white"
:safe="false"
:list="list_top"
></tm-bottomnavigation>
<view>
<tm-bottomnavigation
:safe="false"
bg-theme="bg-gradient-pink-accent"
icon-color-grey="white"
:round="24"
:offset-left="32"A
position="bottom"
:bottom="100"
border=""
icon-color="yellow"
:list="list_3"
></tm-bottomnavigation>
</view>
<view style="height: 200upx;"></view>
<tm-sheet color="green text ">
<view class="text-size-s text-weight-b mb-24 ">也可以静态不悬浮作为工具栏使用</view>
<view class="text-size-xxs mb-24">
提醒：不要在非H5端同一页面使用此多个组件时图片图标和图标名称混用，会造成数据错乱，我也找不到原因，暂时。如有知道原因的可告知。
</view>
<tm-bottomnavigation
:safe="false"
bg-theme="bg-gradient-green-accent"
icon-color-grey="white"
position="static"
:round="4"
:offset-left="32"
:bottom="100"
:top="45"
border=""
icon-color="yellow"
:list="list_2"
></tm-bottomnavigation>
</tm-sheet>
<!-- #endif -->
</view>
</template>
</tm-fullView>
</template>
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
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
<script>
import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
import tmBottomnavigation from "@/tm-vuetify/components/tm-bottomnavigation/tm-bottomnavigation.vue"
export default {
components:{tmFullView,tmMenubars,tmSheet,tmBottomnavigation},
data() {
return {
list_1: [
{ iconSize: 46,showDot:true,dot:{dot:true},path:'/pages/index/index', icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/elf-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/house-snowglobe-freebie-icon.png', value: '标题' },
{ iconSize: 46, icon: 'icon-plus', value: '标题',custom:true,customFontColor:'white',path:'/subpages/com/bottomnavigation'},
{ iconSize: 46,showDot:true,dot:{dot:false,num:99}, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/christmas-tree-freebie-icon.png', value: '标题' },
{ iconSize: 46,showDot:true,dot:{dot:false,icon:'icon-position-fill'}, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/tree-freebie-icon.png', value: '标题' }
],
list_2: [
{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
{
iconSize: 36,
icon: 'icon-times',
value: '标题',
custom: true,
customColor: 'yellow'
},
{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' }
],
list_3: [
{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
{
iconSize: 36,
icon: 'icon-times',
value: '标题',
custom: true,
customColor: 'lpo',
customFontColor:'white'
},
{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
{
iconSize: 36,
icon: 'icon-times',
value: '标题',
custom: true,
customColor: 'lpo',
customFontColor:'white'
}
],
list_top: [
{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-user-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
{ iconSize: 36, icon: 'icon-headset-fill', value: '标题' }
],
navTop: 45
};
},
onLoad() {
// #ifndef H5
this.navTop = 100;
// #endif
},
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
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
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
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| top | Number | 任意数字 | 0 | 距离顶部的距离,只有在position=='top'时启用 |
| bottom | Number | 任意数字 | 0 | 距离底部的距离,只有在position=='bottom'时启用 |
| offset-left | Number | 任意数字 | 0 | 偏移量。即离左边的间距。如果提供，自动居中出现两边间隙。 |
| border | String | top/bottom | top | 显示上边线还是下边线。可选top / bottom,为空''时，即不显示边线 |
| bg-theme | String | 任意主题色名称 | white | 背景颜色主题名称 |
| bg-color | String | 任意颜色值 | '' | 自定颜色值，非主题色名称啦。 |
| icon-color | String | 任意主题色名称 | white | 项目默认激活色 |
| icon-color-grey | String | 任意主题色名称 | white | 项目失去焦点时的颜色 |
| position | String | bottom/top/static | bottom | 工具栏的位置，static表示 不悬浮，静态放置。 |
| vertical | Boolean | true/false | true | 文字方向：默认是竖向。否则为横向。 |
| black | Boolean | true/false | false | 暗黑模式。自定义颜色值和渐变背景时不起作用 |
| safe | Boolean | true/false | true | 是否开启底部安全区域。 |
| activeIndex | Number | 整数 | 0 | 指定选中项，如要开启使用此功能：只有auto-selected设置为false才有作用，并且跨页面自动选中失效，需要你自行设定选中项。 |
| auto-selected | Boolean | true/false | true | 是否开启自动匹配页面选中底部按钮。 |
| list | Array | - | [] | 菜单数据，见下方 |
list菜单数据格式
以下高亮字段为必需要有，其它字段可不出现。
[
{
icon: 'icon-user-fill',//【必填】可以是图标名称或者图片地址。
noIcon:'',//【非必填】未选中时的图标，不提供默认使用相同的icon图标
value: '个人中心',//【非必填】底部文字
iconSize: 38,//【非必填】图标大小
fontSize: 20,//【非必填】文字大小
showDot:false,//【非必填】是否显示角标。启用为true,下面的dot才起作用。
custom: true,//开启底部凸起样式
customColor: 'yellow',//凸起后的背景颜色
customFontColor:'white',//凸起后的图标颜色。
dot:{
dot:false,//【非必填】是否显示点。如果是点，则不显示Num
num:"",//【非必填】是否显示数字。
ico:"",//【非必填】是否显示图标，优先级高于dot,num.
color:'',//角标的背景主题色。如果不提供，将使用iconColor主题。
},
path: '' //【非必填】页面链接，如果提供此字段和值，将会打开指定的页面。比如：/pages/index/index
openType:'switchTab',//默认：switchTab，可选打开方式有：switchTab、redirect、reLaunch、navigateBack、navigate
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | info | Object | 切换按钮时触发。 |
info格式如下
{
index: index,//当前选中的索引
item: ,//上方List项目的数据。
}
1
2
3
4
5
2
3
4
5
👉更新日志
2021年8月20日14:8:5 初始版本。