# 3.4 底部常驻栏（Bottom bar）
为了视觉美观以及方便用户获取信息，我们必须要把内容进行分组、隔离。分隔线（divider）就是这样一条长长的细线
# 布局
状态：关机时，整个页面或只有开机可点击，故强化处理； 开机后，关机按钮为激活可点击状态。
# 基础样式
# 开关机与启动并存时
# 状态
# 基础组合样式
# 开关机与启动并存时组合样式
# 点击加载时
点击功能按钮后，立刻出现加载样式，加载成
# 制作规范
# 示例
# dof-bottom-bar 底部面板组件
底部面板组件
# 实例
# 规则
- 通过配置列表项配置tab-groups属性。
# 基础用法
<template>
<div class="dof-demo">
<dof-minibar
:left-button="leftButton"
title="bottom bar"
text-color="#ffffff"
background-color="rgba(38,122,255,1)"
@dofMinibarRightButtonClicked="minibarRightButtonClick"
>
<div slot="right" class="right-img-wrapper">
<dof-icon :icon-style="{ fontSize: '32px', color: '#ffffff' }" name="refresh"></dof-icon>
</div>
</dof-minibar>
<div class="main">
<scroller class="content-container">
<dof-catalog title="dof-bottom-bar" bg-color="#f9f9f9"></dof-catalog>
<dof-catalog title="使用案例" bg-color="#daf9ca"></dof-catalog>
<dof-catalog title="热水器 water heater && 净水器 water purifier"></dof-catalog>
<dof-bottom-bar
:tab-groups="scene1"
:tab-bar-position="{ position: 'relative', top: '20px' }"
@dofTabItemClicked="tabBarOperateHandler"
></dof-bottom-bar>
<dof-bottom-bar
:tab-groups="scene2"
:tab-bar-position="{ position: 'relative', top: '60px' }"
@dofTabItemClicked="tabBarOperateHandler"
></dof-bottom-bar>
<dof-bottom-bar :tabGroups="tabTitles" @dofTabItemClicked="tabBarOperateHandler"></dof-bottom-bar>
</scroller>
</div>
</div>
</template>
<script>
import { DofMinibar, DofIcon, Core, DofBottomBar, DofCatalog } from 'dolphin-weex-ui'
import Config, { MOCK_DATA } from './config.js'
export default {
components: {
DofMinibar,
DofIcon,
DofBottomBar,
DofCatalog
},
data() {
return {
leftButton: '/assets/image/header/back_white@2x.png',
tabTitles: Config.tabTitles,
scene1: MOCK_DATA.mock_1,
scene2: MOCK_DATA.mock_2
}
},
created() {},
methods: {
minibarLeftButtonClick() {},
minibarRightButtonClick() {
Core.reload()
},
tabBarOperateHandler(e) {
Core.toast(e.target)
}
}
}
</script>
<style lang="scss" scoped>
.dof-demo {
}
.main {
flex: 1;
}
.title-text {
margin-top: 40px;
margin-left: 8px;
margin-bottom: 16px;
}
</style>
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
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
config 文件的内容如下：
/**
* bottom bar 配置文件
*/
export default {
// 正常模式的tab title配置
tabTitles: [
{
type: 'switch',
title: 'power',
text: '开关',
iconColor: '#f2f2f2',
disabled: false,
icon: '/assets/image/bottom-bar/water_heater/calorifier_icon_off@3x.png'
},
{
type: 'mode',
title: 'comfortable',
text: '半胆速热',
iconColor: '#267aff',
disabled: false,
icon: '/assets/image/bottom-bar//water_heater/calorifier_icon_half@3x.png'
},
{
type: 'order',
title: 'order',
text: '预约',
iconColor: '#f2f2f2',
disabled: false,
icon: '/assets/image/bottom-bar/water_heater/calorifier_icon_timingoff@3x.png'
}
]
}
export const MOCK_DATA = {
mock_1: [
{
type: 'switch',
title: 'power',
text: '关机',
iconColor: '#267aff',
disabled: false,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/water_heater/calorifier_icon_on@3x.png'
},
{
type: 'mode',
title: 'comfortable',
disabled: false,
text: '半胆速热',
iconColor: '#267aff',
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/water_heater/calorifier_icon_half@3x.png'
},
{
type: 'mode',
title: 'fungicidal',
text: '满胆贮存',
iconColor: '#267aff',
disabled: false,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/water_heater/calorifier_icon_all@3x.png'
},
{
type: 'order',
title: 'order',
text: '已预约',
iconColor: '#267aff',
disabled: false,
iconText: '18:00'
}
],
mock_2: [
{
type: 'switch',
title: 'power',
text: '开机',
iconColor: '#f2f2f2',
disabled: false,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/water_heater/calorifier_icon_off@3x.png'
},
{
type: 'mode',
title: 'conservation',
text: '节能',
iconColor: '#f2f2f2',
disabled: false,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/warmer/warmer_icon_eco@3x.png'
},
{
type: 'mode',
title: 'heat',
text: '制热（禁用）',
iconColor: '#267aff',
disabled: true,
icon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/sample/warmer/warmer_icon_comfort@3x.png'
},
{
type: 'order',
title: 'order',
text: '已预约',
iconText: '08:00',
iconColor: '#7c879b',
disabled: false
}
]
}
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105