uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能
最近一直在學(xué)習(xí)uni-app開發(fā),由于uniapp是基于vue.js技術(shù)開發(fā)的,只要你熟悉vue,基本上很快就能上手了。
在開發(fā)中發(fā)現(xiàn)uni-app原生導(dǎo)航欄也能實現(xiàn)一些頂部自定義按鈕+搜索框,只需在page.json里面做一些配置即可。設(shè)置app-plus,配置編譯到App平臺的特定樣式。dcloud平臺對app-plus做了詳細說明:app-plus配置,需注意 目前暫支持H5、App端,不支持小程序。
在page.json里配置app-plus即可
{ "path": "pages/ucenter/index", "style": { "navigationBarTitleText": "我的", "app-plus": { "titleNView": { "buttons": [ { "text": "\ue670", "fontSrc": "/static/iconfont.ttf", "fontSize": "22px", "float": "left" }, { "text": "\ue62c", "fontSrc": "/static/iconfont.ttf", "fontSize": "22px" } ], "searchInput":{ ... } } } } },
對于如何監(jiān)聽按鈕、輸入框事件,uni-app給出了相應(yīng)API,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,寫在響應(yīng)的頁面中即可。
那如何可以實現(xiàn)像京東、淘寶、微信頂部導(dǎo)航欄,如加入城市定位、搜索、自定圖片/圖標、圓點提示。。。
上面的方法是可以滿足一般項目需求,但是在小程序里則失效了,而且一些復(fù)雜的導(dǎo)航欄就不能很好兼顧,這時只能尋求其它替代方法了
將navigationStyle設(shè)為custom或titleNView設(shè)為false時,原生導(dǎo)航欄不顯示,這時就能自定義導(dǎo)航欄
"globalStyle": {"navigationStyle": "custom"}
下面是簡單測試實例:
這里要注意的是,H5、小程序、App端狀態(tài)欄都不一樣,需要重新計算處理,我這里已經(jīng)處理好了,可直接使用,在App.vue里面設(shè)置即可
onLaunch: function() { uni.getSystemInfo({ success:function(e){ Vue.prototype.statusBar = e.statusBarHeight // #ifndef MP if(e.platform == 'android') { Vue.prototype.customBar = e.statusBarHeight + 50 }else { Vue.prototype.customBar = e.statusBarHeight + 45 } // #endif // #ifdef MP-WEIXIN let custom = wx.getMenuButtonBoundingClientRect() Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight // #endif // #ifdef MP-ALIPAY Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight // #endif } }) },
嘖嘖,看下面的效果,是不是覺得很眼熟,沒錯,就是基于uni-app簡單的實現(xiàn)了一個仿微信頂部導(dǎo)航條
頂部的圖標使用iconfont字體圖標、另外還可自定傳入圖片
<header-bar :isBack="false" title="標題信息" titleTintColor="#fff"> <text slot="back" class="uni_btnIco iconfont icon-arrL"></text> <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text> <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text> <!-- <text slot="string" class="uni_btnString" @tap="ccc">添加好友</text> --> <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image> </header-bar>
<header-bar :isBack="true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search> <text slot="back" class="uni_btnIco iconfont icon-arrL"></text> <text slot="iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa"></text> <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image> </header-bar>
<header-bar :isBack="true" title="我的" titleTintColor="#fff" :bgColor="{background: '#353535'}"> <text slot="back" class="uni_btnIco iconfont icon-close"></text> <text slot="iconfont" class="uni_btnIco iconfont icon-search"></text> <text slot="string" class="uni_btnString" style="color: #2B9939;">添加好友</text> </header-bar>
支持傳入的屬性,另外還用到了vue插槽slot
/*** isBack 是否返回按鈕 title 標題 titleTintColor 標題顏色 bgColor 背景 center 標題居中 search 搜索條 searchRadius 圓形搜索條 fixed 是否固定 */
<template> <view class="uni_topbar" :style="style"> <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]"> <!-- 返回 --> <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> --> <view v-if="isBack" @tap="goBack"> <slot name="back"></slot> </view> <slot name="headerL"></slot> <!-- 標題 --> <!-- #ifndef MP --> <view class="flex1" v-if="!search && center"></view> <!-- #endif --> <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title"> {{title}} </view> <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> /> <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" /> </view> <!-- 右側(cè) --> <view class="uni_headerRight flexbox flex_row flex_alignc"> <slot name="iconfont"></slot> <slot name="string"></slot> <slot name="image"></slot> </view> </view> </view> </template> <script> export default { data() { return { statusBarH: this.statusBar, customBarH: this.customBar } }, props: { isBack: { type: [Boolean, String], default: true }, title: { type: String, default: '' }, titleTintColor: { type: String, default: '#fff' }, bgColor: Object, center: { type: [Boolean, String], default: false }, search: { type: [Boolean, String], default: false }, searchRadius: { type: [Boolean, String], default: false }, fixed: { type: [Boolean, String], default: false }, }, computed: { style() { let _style = `height: ${this.customBarH}px;` return _style } }, methods: { goBack() { uni.navigateBack() } } } </script>
最后附上一個基于ReactNative實現(xiàn)的自定義導(dǎo)航條的聊天室項目
http://www.dbjr.com.cn/article/174036.htm
總結(jié)
以上所述是小編給大家介紹的uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
Vue2?響應(yīng)式系統(tǒng)之數(shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之數(shù)組,本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換,響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開相關(guān)內(nèi)容,需要的朋友可以參考一下2022-04-04在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能(代碼高亮顯示及自動提示),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08VeeValidate在vue項目里表單校驗應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項目里表單校驗應(yīng)用案例,VeeValidate是Vue.js的驗證庫,它有很多驗證規(guī)則,并支持自定義規(guī)則,非常具有實用價值,需要的朋友可以參考下2018-05-05Vue 使用 Mint UI 實現(xiàn)左滑刪除效果CellSwipe
這篇文章主要介紹了Vue 使用 Mint UI 實現(xiàn)左滑刪除效果CellSwipe,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04vuex 實現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11