如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框
最近公司準(zhǔn)備做app，最終決定使用uni-app框架開(kāi)發(fā)，但是當(dāng)把設(shè)計(jì)圖給我的時(shí)候我心里有點(diǎn)沒(méi)底，因?yàn)樗脑O(shè)計(jì)圖頂部長(zhǎng)成這個(gè)樣子：
因?yàn)檫@個(gè)功能在小程序是根本無(wú)法實(shí)現(xiàn)的，可能受這個(gè)影響，我感覺(jué)好像實(shí)現(xiàn)不了，但是我還是回頭看了看文檔，才發(fā)現(xiàn)，這個(gè)功能是可以實(shí)現(xiàn)的，只需要在pages.json中做一些配置即可
這個(gè)在官方稱(chēng)作app-plus,可以自定義導(dǎo)航區(qū)域，具體配置如下：
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarBackgroundColor": "#00c170",
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"text": "地圖",
"fontSize":"16",
"float": "right",
"color":"#fff"
},
{
"text": "唐山",
"fontSize":"16",
"float": "left",
"color":"#fff"
}
],
"searchInput":{
"align": "center",
"placeholder": "請(qǐng)輸入查找房源信息",
"borderRadius":"50upx",
"backgroundColor": "#fff"
}
}
}
}
} ]
效果如下：
你可能會(huì)問(wèn)，我的點(diǎn)擊事件和輸入框事件如何監(jiān)聽(tīng)？
uni-app給出了相應(yīng)的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged，寫(xiě)在響應(yīng)的頁(yè)面中即可：
export default {
onNavigationBarButtonTap() {
console.log("你點(diǎn)擊了按鈕")
},
onNavigationBarSearchInputChanged () {
console.log("你輸入了信息")
}
}
打印結(jié)果：
但是按鈕有兩個(gè)，只有一個(gè)按鈕事件怎么辦？還有輸入框的文字如何獲?。科鋵?shí)這兩個(gè)函數(shù)接收一個(gè)值，就是相對(duì)應(yīng)的信息：
export default {
onNavigationBarButtonTap(val) {
console.log(val)
},
onNavigationBarSearchInputChanged (val) {
console.log(val)
}
}
打印結(jié)果：
按鈕事件根據(jù)對(duì)應(yīng)的text判斷即可，而輸入框監(jiān)聽(tīng)的不是change事件，是input事件，即輸入后即可監(jiān)聽(tīng)到而不是失焦
你以為這就完了？NoNoNo,眼尖的同學(xué)發(fā)現(xiàn)我做的和設(shè)計(jì)圖還是有區(qū)別的，右邊地圖有一個(gè)icon我沒(méi)有寫(xiě)，如果按照上邊的方法是不能加的，但是我們可以去掉導(dǎo)航欄自定義
page.json里每個(gè)頁(yè)面的導(dǎo)航欄是默認(rèn)開(kāi)啟的，有一個(gè)navigationStyle屬性，默認(rèn)值是default，我們把它改成custom就能把他去掉了：
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom"
}
但是移動(dòng)端導(dǎo)航依然在，這就需要我們使用titleNView這個(gè)屬性了，它是用來(lái)專(zhuān)門(mén)設(shè)置導(dǎo)航欄的，具體如下：
{
"path" : "pages/secondPage/secondPage",
"style" : {
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
}
然后我們自己就可以寫(xiě)一套導(dǎo)航了，最后效果如下：
這里有一個(gè)坑，除了要給這個(gè)導(dǎo)航設(shè)置固定定位外，實(shí)際上手機(jī)最上方的狀態(tài)欄，也就是這個(gè)位置是透明的，因?yàn)槲覀儼涯J(rèn)的導(dǎo)航去掉了：
所以我們?cè)趯?xiě)導(dǎo)航的時(shí)候上方的內(nèi)邊距是比下方的要大那么一點(diǎn)，這樣才能保證覆蓋狀態(tài)欄。
下面是我寫(xiě)的源碼：
<template>
<view class="head">
<view class="header-wrap">
<view class="index-header">
<text class="address" v-if="leftWords">{{leftWords}}</text>
<view class="input-wrap" v-if="input">
<input type="text"
placeholder="請(qǐng)輸入搜索"
v-model="value"
@change="inputChange"/>
<text class="iconfont iconfangdajing"></text>
</view>
<view class="map-wrap"
v-if="rightWords||rightIcon"
@click="rightClick">
<text class="iconfont" :class="rightIcon"></text>
<text>{{rightWords}}</text>
</view>
</view>
</view>
<view class="blank"></view>
</view>
</template>
<script>
export default {
name: "IndexHeader",
props: [
'leftWords',
'input',
'rightIcon',
'rightWords'
],
data () {
return {
value: ''
}
},
methods: {
inputChange: function () {
this.$emit('change',this.value)
},
rightClick: function () {
this.$emit("rightClick")
}
}
}
</script>
<style lang="scss">
$color-base: #00c16f;
$words-color-base: #333333;
$words-color-light: #999999;
.header-wrap {
width: 100%;
position: fixed;
top: 0;
z-index: 999;
.index-header {
height: 88upx;
line-height: 88upx;
padding: 0 30upx;
padding-top: 40upx;
background-color: $color-base;
font-size: 28upx;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.address {
font-size: 26upx;
}
.input-wrap {
width: 500upx;
height: 70upx;
padding: 10upx 30upx 10upx 100upx;
box-sizing: border-box;
background-color: #fff;
border-radius: 50upx;
color: $words-color-base;
position: relative;
text {
position: absolute;
left: 40upx;
top: -8upx;
color: $words-color-light;
font-size: 30upx;
}
}
.map-wrap {
.iconfont {
font-size: 32upx;
margin-right: 5upx;
}
text {
font-size: 26upx;
}
}
}
}
.blank {
height: 126upx;
}
</style>
以上就是如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框的詳細(xì)內(nèi)容，更多關(guān)于用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript學(xué)習(xí)筆記之函數(shù)記憶
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之函數(shù)記憶，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了微信小程序倒計(jì)時(shí)功能實(shí)例代碼,當(dāng)單擊按鈕彈出一個(gè)半透明的彈出層，在規(guī)定時(shí)間內(nèi)激活關(guān)閉按鈕，關(guān)閉彈出層。需要的朋友可以參考下2018-07-07
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換，感興趣的小伙伴們可以學(xué)習(xí)一下2015-11-11
js格式化貨幣數(shù)據(jù)實(shí)現(xiàn)代碼
貨幣數(shù)據(jù)想要一某種形式在頁(yè)面中顯示的話(huà)，首先是必須要格式化的，下面為大家介紹下具體的格式化代碼，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS克隆，屬性，數(shù)組，對(duì)象，函數(shù)實(shí)例分析
這篇文章主要介紹了JS克隆，屬性，數(shù)組，對(duì)象，函數(shù),結(jié)合實(shí)例形式分析了javascript中面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)的對(duì)象、屬性、函數(shù)及數(shù)組等相關(guān)技巧,需要的朋友可以參考下2016-11-11
Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解
這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04![javascript[js]獲取url參數(shù)的代碼](http://img.jbzj.com/images/xgimg/bcimg7.png)
多瀏覽器兼容用javascript獲取url參數(shù)的方法比較推薦的一種2007-10-10
這篇文章主要介紹了Node.js和PHP根據(jù)ip獲取地理位置的方法,通過(guò)新浪接口根據(jù)IP地址獲取所在城市,需要的朋友可以參考下2014-03-03
JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù),實(shí)例分析了javascript實(shí)現(xiàn)冪運(yùn)算的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04