uniapp 如何给搜索框设值_头部导航栏基础设置
> 原生導(dǎo)航的體驗(yàn)更好，渲染新頁(yè)面時(shí)，原生導(dǎo)航欄的渲染無(wú)需等待新頁(yè)面dom加載，可以在新頁(yè)面進(jìn)入動(dòng)畫(huà)開(kāi)始時(shí)就渲染。
> 更多功能參考此示例：https://ext.dcloud.net.cn/plugin?id=1765
[TOC]
## 原生導(dǎo)航欄的通用配置
> 原生通用配置：即小程序、APP、H5都通用的配置，修改pages.json，page>style(單個(gè)頁(yè)面設(shè)置)或者globalStyle(全局設(shè)置)中進(jìn)行navigationBar相關(guān)配置
> 參考 https://uniapp.dcloud.io/collocation/pages?id=style
## 5+ APP 導(dǎo)航欄擴(kuò)展
> 除了上面提到的通用配置以外，還提供了5+ APP(即iOS、Android)的增強(qiáng)自定義配置，修改pages.json中的app-plus>titleNView的相關(guān)配置
> 參考文檔：https://uniapp.dcloud.io/collocation/pages?id=app-plus
## 去除原生導(dǎo)航欄
> 修改pages.json，page>style(單個(gè)頁(yè)面設(shè)置)或者globalStyle(全局設(shè)置)中將navigationStyle(默認(rèn)default)修改為custom
> 被設(shè)置為custom的頁(yè)面，沒(méi)有了原生導(dǎo)航，則需要開(kāi)發(fā)者使用view自行繪制導(dǎo)航欄
```
"globalStyle": {
"navigationStyle": "custom"
}
```
## 去除原生導(dǎo)航欄后自繪導(dǎo)航欄
> 通過(guò)繪制一個(gè)占位的view固定放在狀態(tài)欄
> uni-app提供了一個(gè)狀態(tài)欄高度的css變量，具體參考：https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F
> 推薦使用第三方組件 (當(dāng)然優(yōu)先推薦使用原生，性能更好)
> 1. https://ext.dcloud.net.cn/plugin?id=974
> 2. https://ext.dcloud.net.cn/plugin?id=52
~~~
~~~
~~~
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
~~~
## 給原生導(dǎo)航欄添加自定義按鈕
> 按鈕的點(diǎn)擊事件需要在頁(yè)面監(jiān)聽(tīng)onNavigationBarButtonTap事件
> 通過(guò)修改titleNView的配置實(shí)現(xiàn)自定義按鈕，titleNView設(shè)置有很多，詳細(xì)api：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
> 提示：hello uni-app的中 模板 -> 頂部導(dǎo)航標(biāo)題欄 有示例
> 頁(yè)面監(jiān)聽(tīng)代碼如下：
~~~
export default {
data() {
return {}
},
onNavigationBarButtonTap() {
console.log("點(diǎn)擊了自定義按鈕");
}
}
~~~
> pages.json配置如下：
> buttons的text推薦使用字體圖標(biāo)
> 如果按鈕使用的漢字或英文較長(zhǎng)，推薦把字體改小一點(diǎn)，或者調(diào)節(jié)按鈕寬度等值
> 配置button的背景顏色為透明：background:'rgba(0,0,0,0)'
~~~
{
"path": "pages/log/log",
"style": {
"navigationBarTitleText": "hello",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue534",
"fontSrc": "/static/uni.ttf",
"fontSize": "22px"
}]
}
}
}
}
~~~
### 導(dǎo)航欄帶紅點(diǎn)和角標(biāo)
~~~
{
"path" : "nav-dot/nav-dot",
"style" : {
"navigationBarTitleText" : "導(dǎo)航欄帶紅點(diǎn)和角標(biāo)",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "消息",
"fontSize" : "14",
"redDot" : true
},
{
"text" : "關(guān)注",
"fontSize" : "14",
"badgeText" : "12"
}
]
}
}
}
}
~~~
### 導(dǎo)航欄帶下拉選擇(城市選擇)
~~~
{
"path" : "nav-city-dropdown/nav-city-dropdown",
"style" : {
"navigationBarTitleText" : "導(dǎo)航欄帶城市選擇",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "北京市",
"fontSize" : "14",
"select" : true,
"width" : "auto"
}
]
}
}
}
}
~~~
### 導(dǎo)航欄帶搜索框
> 因代碼較多，此處不列，請(qǐng)參考hello uni-app的 模板 -> 頂部導(dǎo)航標(biāo)題欄示例。
### 透明漸變樣式
> 原生導(dǎo)航欄還支持透明漸變效果，頁(yè)面剛載入時(shí)沒(méi)有導(dǎo)航標(biāo)題，頁(yè)面內(nèi)容通頂?shù)綘顟B(tài)欄里，頁(yè)面向下滾動(dòng)后標(biāo)題欄漸變出現(xiàn)。
~~~
{
"path": "pages/log/log",
"style": {
"navigationBarTitleText": "hello",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
}
~~~
### 導(dǎo)航欄帶圖片
> titleNView新版配置可以直接配圖片，還支持Gif圖。但這里提供一個(gè)黑科技寫(xiě)法，通過(guò)在titleNView里配置tags，可以實(shí)現(xiàn)導(dǎo)航欄繪制圖片的效果：
> 通過(guò)配置 tags 除了可以繪制圖片，還可以繪制更多豐富的內(nèi)容，如：richtext(富文本)、font(文本)、input(輸入框)、rect(矩形區(qū)域)。詳情參考：[titleNView](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles)、[tags](http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles)。
~~~
{
"path" : "nav-image/nav-image",
"style" : {
"app-plus" : {
"titleNView" : {
"titleText" : "",
"tags" : [
{
"tag" : "img",
"src" : "/static/nav.png",
"position" : {
"left" : "auto",
"top" : "auto",
"width" : "110px",
"height" : "26px"
}
}
]
}
}
}
}
~~~
## 通過(guò)setStyle方式動(dòng)態(tài)修改原生導(dǎo)航欄樣式
> 如果需要js動(dòng)態(tài)修改導(dǎo)航欄，uni有跨端的api可修改標(biāo)題、背景色、前景色。這部分是app、小程序、h5都支持的，參考 https://uniapp.dcloud.io/api/ui/navigationbar。
> 對(duì)于app側(cè)擴(kuò)展的設(shè)置，比如自己添加的buttons，則需使用plus的js api來(lái)動(dòng)態(tài)設(shè)置。在App端可以通過(guò)得到webview對(duì)象，通過(guò)setStyle方法重新設(shè)置，包括修改webview對(duì)象的titleNview屬性，以達(dá)到修改標(biāo)題欄按鈕文字及樣式的功能。具體參考：https://ask.dcloud.net.cn/article/35374
參考文檔：
> https://uniapp.dcloud.io/collocation/pages?id=style
> https://ask.dcloud.net.cn/article/34921
> 不錯(cuò)的導(dǎo)航欄插件：https://ext.dcloud.net.cn/plugin?id=52
總結(jié)
以上是生活随笔為你收集整理的uniapp 如何给搜索框设值_头部导航栏基础设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ios键盘横屏_cocos2d 3.2版
- 下一篇： map mybatis 的字段返回0_M