【小程序】uniApp 自定义导航栏
Taxpolat 9/10/2021 小程序开发技巧
# 自定义导航栏
小程序开发时难免会遇到自定义原生导航栏的任务或需求，下面以uinApp (opens new window)框架开发的小程序为例，记上一个自己开发的自定义导航栏组件。
ps: 当然很多组件也有自己的自定义导航栏，我就自己开发， 哎~ 就是玩儿！
# 组件代码
// customizeNavigation.vue
<template>
<view>
<view :style="{ background: background }" class="custom-header-container">
<view
:style="{ height: getStausBarHeight * 2 + 'rpx' }"
class="custom-header-status-bar"
>
</view>
<view
:class="{ 'ios-center': isIos }"
class="custom-header-top-container"
>
<u-icon
v-if="showBack"
:style="{ color: color }"
:class="{ isIos: isIos }"
name="arrow-left"
class="custom-back-btn iconfont"
@tap="backTap"
/>
<view
:style="{ color: color }"
:class="{ 'ios-center': isIos }"
class="custom-header-title"
>
{{ title }}
</view>
</view>
</view>
<view
:style="{ height: (navHeight - 2) * 2 + 'rpx' }"
class="custom-header-height"
></view>
</view>
</template>
<script>
export default {
name: "customizeNavigation",
props: {
title: {
type: String,
default: "",
},
background: {
type: String,
default: "#2C6CEC",
},
color: {
type: String,
default: "#ffffff",
},
// 是否有箭头
showBack: {
type: Boolean,
default: true,
},
},
data() {
return {
navHeight: "",
};
},
created() {
uni.getSystemInfo({
success: (res) => {
//导航高度
this.navHeight = res.statusBarHeight + 46;
},
fail(err) {
console.log(err);
},
});
},
computed: {
getStausBarHeight() {
try {
const res = uni.getSystemInfoSync();
return res.statusBarHeight;
} catch (e) {
console.log(e);
}
},
isIos() {
return uni.getSystemInfoSync().system.indexOf("iOS") > -1;
},
},
methods: {
backTap() {
uni.navigateBack({
delta: 1,
fail: () => {
// uni.switchTab({
// url: "/pages/home",
// });
},
});
},
},
};
</script>
<style scoped lang="scss">
.custom-header-top-container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
width: 100%;
align-items: center;
&.ios-center {
justify-content: center;
}
}
.custom-header-container {
z-index: 9;
width: 750upx;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
background-size: 100% 100% !important;
}
.custom-back-btn {
height: 96rpx;
line-height: 96rpx;
width: 80rpx;
margin: 0;
padding: 0;
border-radius: 0 !important;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0upx;
font-size: 36rpx;
border-radius: 10rpx;
font-weight: 500;
color: #ffffff;
&.isIos {
line-height: 90rpx;
height: 90rpx;
}
}
.custom-header-status-bar {
width: 100%;
top: 0;
position: sticky;
z-index: 100;
}
.custom-header-title {
height: 96rpx;
line-height: 96rpx;
font-size: 36rpx;
margin-left: 80rpx;
color: #ffffff;
&.ios-center {
margin-left: 0;
line-height: 90rpx;
height: 90rpx;
}
}
</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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
# 使用
以index页面为例子
- 首先需要自定义的页面在
pages.json文件里, 把style的navigationStyle, 属性改成"navigationStyle": "custom"。
// pages.json
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
1
2
3
4
5
6
7
2
3
4
5
6
7
- 在需要自定义的页面文件引入该组件,注册，传相关参数并使用
//index.vue
import customizeNavigation from "@/components/customizeNavigation"
export default {
components: {
customizeNavigation
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
使用：
<template>
<view>
<customizeNavigation
title="我的页面"
background="#2C6CEC"
color="#ffffff"
/>
</view>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
然后也可以按照自己的需求添加各种各样的参数，写出各种各样的自定义导航栏。