自定义小程序导航栏
最近在做小程序的时候，UI 设计给出了个效果图，第一眼感觉，嗯~ o(￣▽￣)o 效果还可以。
再仔细一想，这个效果不简单呐。
不过这都不算事，一行代码代码解决不了的，那就一万行。
开干！！！
步骤解析
首先得先实现自定义导航栏，自己定义返回按钮及标题栏，同时使用绝对定位将Logo图片置于顶部。
自定义导航栏
html
<view class="navigation-container" style="height: {{navigationBarAndStatusBarHeight}};--text-color: {{textcolor}};">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class="navigation-bar" style="{{'height:' + navigationBarHeight}}">
<view catch:tap="handleBackClick" data-navigationtype="{{navigationtype}}" data-navigationurl="{{navigationurl}}" class="navigation-buttons" style="{{'height:' + menuButtonHeight}}">
<t-icon color="{{textcolor}}" name="chevron-left" size="56rpx" />
<!-- <t-divider t-class="icon-seperator" t-class-content="icon-seperator-content" layout="vertical" />
<t-icon color="{{textcolor}}" name="home" size="48rpx" /> -->
</view>
<view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">{{title}}</view>
</view>
</view>
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}"></view>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
less
.navigation-container {
--text-color: #fff;
--background-color: transparent;
--td-divider-content-color: var(--text-color);
position: fixed;
width: 100%;
z-index: 9999999;
top: 0;
left: 0;
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 10px;
box-sizing: border-box;
background-color: transparent;
width: 68rpx;
.icon-seperator {
height: initial;
}
.icon-seperator-content {
color: var(--text-color) !important;
}
}
.navigation-title {
position: absolute;
left: 104px;
right: 104px;
text-align: center;
font-size: 32rpx;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}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
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
typescript
type ICustomNavigationType = "navigateBack" | "navigateTo" | "switchTab";
interface ICustomNavigationEvent {
currentTarget: {
dataset: {
navigationtype: ICustomNavigationType
navigationurl: string
}
}
}
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: ""
},
navigationtype: {
type: String,
value: "navigateBack" as ICustomNavigationType
},
navigationurl: {
type: String,
value: "/pages/index/index"
},
textcolor: {
type: String,
value: "#fff"
},
backgroundcolor: {
type: String,
value: "transparent"
},
},
/**
* 组件的初始数据
*/
data: {
//是否是分享页面 由分享而来 不展示返回按钮
isShare: false,
// 状态栏高度
statusBarHeight: 44 + 'px',
// 导航栏高度
navigationBarHeight: 44 + 'px',
// 胶囊按钮高度
menuButtonHeight: 44 + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: 44 + 'px'
},
/**
* 组件的方法列表
*/
methods: {
handleBackClick(evt: ICustomNavigationEvent) {
const { navigationtype, navigationurl } = evt.currentTarget.dataset
if (navigationtype === "navigateTo") {
wx.navigateTo({
url: navigationurl
})
return
}
if (navigationtype === "switchTab") {
wx.switchTab({
url: navigationurl
})
return
}
wx.navigateBack()
}
},
lifetimes: {
attached() {
const that = this;
const {
statusBarHeight,
platform
} = wx.getSystemInfoSync();//获取系统信息
const {
top,
height
} = wx.getMenuButtonBoundingClientRect();
console.log(wx.getSystemInfoSync())
//状态栏高度
// 胶囊按钮高度 一般是32px 如果获取不到就使用32px
const menuButtonHeight = height ? height : 32;
// 判断胶囊按钮信息是否成功获取
let navigationBarHeight = platform === 'android' ? 48 : 40
if (top && top !== 0 && height && height !== 0) {
// 导航栏高度
navigationBarHeight = (top - statusBarHeight) * 2 + height
}
//用于绝对定位 占用空间
const navigationBarAndStatusBarHeight = navigationBarHeight + statusBarHeight;
that.setData({
// 状态栏高度
statusBarHeight: statusBarHeight + 'px',
// 导航栏高度
navigationBarHeight: navigationBarHeight + 'px',
// 胶囊按钮高度
menuButtonHeight: menuButtonHeight + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: navigationBarAndStatusBarHeight + 'px'
})
}
}
})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
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
使用
html
<t-navigation-bar navigationtype="navigateBack" title="航班详情"></t-navigation-bar>
<view class="container">
<view class="header">
<image class="header-logo" src="/modules/service/flight/images/pic_home_logo@3x.png" />
</view>
<view class="body">
<view class="flight-card">
<view class="title">
<view class="title-flighticon">
<image style="width: 56rpx;height: 56rpx;" src="/modules/service/flight/images/icon_flight_detail@3x.png" />
</view>
<view class="title-flightinfo">
<view class="title-flightnumber">
<view>{{flightInfo.flightCarrier}} {{flightInfo.flightNO}} {{flightInfo.sharedFlight?'共享':''}}</view>
<view class="title-flightdate">
{{flightInfo.flightDate}}
</view>
</view>
<view class="title-flightnumber-share">实际乘坐航班：{{flightInfo.actualFlight}}</view>
</view>
</view>
<t-divider></t-divider>
<view class="content">
<view class="progress">
<view class="progress-left">
<text>{{flightInfo.progressTitle}}</text>
</view>
<view class="progress-right">
<text>{{flightInfo.progressLabel}}</text>
</view>
</view>
<view class="times">
<view class="times-row">
<view class="times-row-left">预计起飞时间</view>
<view class="times-row-center">
</view>
<view class="times-row-right">预计到达时间</view>
</view>
<view class="times-row">
<view class="times-row-left">{{flightInfo.estimateDepartureTime}}</view>
<view class="times-row-center">
<image style="width: 56rpx;height: 56rpx;" src="/modules/service/flight/images/icon_home_wdgz_flight@3x.png" />
</view>
<view class="times-row-right">{{flightInfo.estimateArrivalTime}}</view>
</view>
<view class="times-row">
<view class="times-row-left">计划起飞时间：{{flightInfo.planDepartureTime}}</view>
<view class="times-row-center">
</view>
<view class="times-row-right">计划到达时间：{{flightInfo.planArrivalTime}}</view>
</view>
<view class="times-row">
<view class="times-row-left">{{flightInfo.departure}}</view>
<view class="times-row-center"></view>
<view class="times-row-right">{{flightInfo.arrival}}</view>
</view>
</view>
<view class="cells">
<view class="cell">
<text>{{flightInfo.gateNumber}}</text>
<text>值机柜台</text>
</view>
<view class="cell">
<text>{{flightInfo.checkInNumber}}</text>
<text>登机口</text>
</view>
<view class="cell">
<text>{{flightInfo.planBoardingTime}}</text>
<text>预计登机时间</text>
</view>
</view>
</view>
</view>
<view class="action">
<t-button t-class="checkin-button" variant="outline" theme="primary" size="large" block>
<view class="image-button">
<image style="width: 48rpx;height: 48rpx;" src="/modules/service/flight/images/icon_flight_zxzj@3x.png" />在线值机
</view>
</t-button>
<t-button wx:if="{{flightInfo.isConcerned}}" theme="primary" size="large" block>
<view class="image-button">
<image style="width: 48rpx;height: 48rpx;" src="/modules/service/flight/images/icon_flight_qxgz_1@3x.png" />取消关注
</view>
</t-button>
<t-button t-class="image-button unconcerned-button" wx:else size="large" block>
<view class="image-button">
<image style="width: 48rpx;height: 48rpx;" src="/modules/service/flight/images/icon_flight_follow@3x.png" />关注航班
</view>
</t-button>
</view>
</view>
</view>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
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
json
{
"usingComponents": {
"t-divider": "tdesign-miniprogram/divider/divider",
"t-navigation-bar":"../../components/navigation-bar/navigation-bar"
},
"navigationBarTitleText": "航班详情",
"navigationStyle": "custom"
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
typescript
Page({
/**
* 页面的初始数据
*/
data: {
flightInfo: {
flightNO: 'CA1350',
flightCarrier: '中国国航',
flightDate: '2023-08-08',
sharedFlight: true,
actualFlight: 'ZH9420',
departure: '苏南硕放机场',
planDepartureTime: '08:06',
estimateDepartureTime: '08:06',
actualDepartureTime: '08:06',
arrival: '北京大兴机场',
planArrivalTime: '10:16',
estimateArrivalTime: '10:16',
actualArrivalTime: '10:16',
gateNumber: '33-36',
checkInNumber: '09',
planBoardingTime: '07:40',
progressTitle: '正在办票',
progressLabel: '',
isConcerned: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(params: {
flightNO: string
}) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})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
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
less
page {
background-color: #F8F8F8;
}
.container {
--td-brand-color: #00A4C5;
--td-divider-color: #c0bcbc;
padding: 0;
gap: 60rpx;
background-color: #F8F8F8;
position: absolute;
top: 0;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.header {
width: 100%;
position: relative;
display: flex;
flex-direction: row;
height: 400rpx;
align-items: center;
justify-content: center;
z-index: 0;
.header-logo {
width: 300rpx;
height: 300rpx;
z-index: 2;
}
&::after {
content: '';
width: 120%;
height: 400rpx;
position: absolute;
z-index: 1;
left: -10%;
top: 0;
border-radius: 0 0 50% 50%;
background-color: #f3f3f3;
background: linear-gradient(0deg, #12507b, #12507b);
}
}
.body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 60rpx;
width: 96vw;
.flight-card {
margin-top: -200rpx;
border-radius: 10rpx;
background-color: #fff;
width: 100%;
z-index: 3;
font-size: 28rpx;
.title {
display: flex;
gap: 30rpx;
padding: 0 40rpx;
align-items: center;
height: 120rpx;
.title-flighticon {
width: 56rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.title-flightinfo {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title-flightnumber {
font-size: 32rpx;
font-weight: bold;
display: flex;
justify-content: space-between;
.title-flightdate {
font-size: 32rpx;
font-weight: bold;
}
}
.title-flightnumber-share {
font-weight: normal;
font-size: 28rpx;
}
}
}
.content {
padding: 10rpx 40rpx;
gap: 30rpx;
display: flex;
flex-direction: column;
.progress {
display: flex;
background-color: #BCF7C7;
border-radius: 10rpx;
height: 68rpx;
color: #fff;
.progress-left {
flex: 3;
display: flex;
align-items: center;
border-radius: 10rpx;
background-color: #58BE6B;
justify-content: center;
}
.progress-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 7;
}
}
.times {
display: flex;
flex-direction: column;
gap: 10rpx;
.times-row {
display: flex;
justify-content: space-between;
align-items: center;
.times-row-left {}
.times-row-center {}
.times-row-right {
text-align: right;
}
}
.times-row:nth-child(2) {
font-size: 56rpx;
font-weight: bold;
}
.times-row:nth-child(4) {
font-size: 32rpx;
}
}
.cells {
display: flex;
gap: 30rpx;
.cell {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-radius: 10rpx;
background-color: #f2f2f2;
height: 200rpx;
text:first-child {
flex: 3;
font-size: 48rpx;
font-weight: bold;
display: flex;
align-items: center;
}
text:last-child {
flex: 2;
display: flex;
align-items: center;
}
}
}
}
}
.action {
width: 100%;
display: flex;
// grid-template-columns: repeat(2, 1fr);
gap: 10rpx;
}
}
}
.image-button {
display: flex;
align-items: center;
justify-content: center;
gap: 20rpx;
width: 100%;
}
.checkin-button {
color: var(--td-brand-color, #0052d9) !important;
border: solid 1px var(--td-brand-color, #0052d9);
}
.unconcerned-button {
color: var(--td-brand-color, #0052d9) !important;
background-color: #fff !important;
}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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226