nav-bar.nvue
4.92 KB
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
<template>
<view class="container">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
title="自定义导航栏" @clickLeft="back" />
<uni-card is-full :isShadow="false">
<text
class="uni-h6">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
</uni-card>
<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar title="标题" />
</view>
</uni-section>
<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
</view>
</uni-section>
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" />
</view>
</uni-section>
<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回"
rightText="设置" title="自定义颜色" />
</view>
</view>
</uni-section>
<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置"
title="自定义高度" />
</view>
</view>
</uni-section>
<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar>
<block slot="left">
<view class="city">
<view>
<text class="uni-nav-bar-text">{{ city }}</text>
</view>
<uni-icons type="arrowdown" color="#666" size="18" />
</view>
</block>
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
@confirm="confirm" />
</view>
<block slot="right">
<view class="city">
搜索
</view>
</block>
</uni-nav-bar>
</view>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
city: '北京'
}
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
search() {
uni.showToast({
title: '搜索'
})
},
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
confirm() {
uni.showToast({
title: '搜索'
})
}
},
onPullDownRefresh() {
console.log('onPullDownRefresh')
setTimeout(function() {
uni.stopPullDownRefresh()
console.log('stopPullDownRefresh')
}, 1000)
}
}
</script>
<style lang="scss">
$nav-height: 30px;
.box-bg {
background-color: #F5F5F5;
padding: 5px 0;
}
.city {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
// width: 160rpx;
margin-left: 4px;
}
.input-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 500rpx;
flex: 1;
background-color: #f8f8f8;
height: $nav-height;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: $nav-height;
}
.input-uni-icon {
line-height: $nav-height;
}
.nav-bar-input {
height: $nav-height;
line-height: $nav-height;
/* #ifdef APP-PLUS-NVUE */
width: 370rpx;
/* #endif */
padding: 0 5px;
font-size: 12px;
background-color: #f8f8f8;
}
</style>