uni app仿微信頂部導(dǎo)航條功能

更新時(shí)間：2019年09月17日 08:22:35 作者：xiaoyan2017

這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最近一直在學(xué)習(xí)uni-app開發(fā)，由于uniapp是基于vue.js技術(shù)開發(fā)的，只要你熟悉vue，基本上很快就能上手了。

在開發(fā)中發(fā)現(xiàn)uni-app原生導(dǎo)航欄也能實(shí)現(xiàn)一些頂部自定義按鈕+搜索框，只需在page.json里面做一些配置即可。設(shè)置app-plus，配置編譯到App平臺的特定樣式。dcloud平臺對app-plus做了詳細(xì)說明：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)的頁面中即可。

那如何可以實(shí)現(xiàn)像京東、淘寶、微信頂部導(dǎo)航欄，如加入城市定位、搜索、自定圖片/圖標(biāo)、圓點(diǎn)提示。。。

上面的方法是可以滿足一般項(xiàng)目需求，但是在小程序里則失效了，而且一些復(fù)雜的導(dǎo)航欄就不能很好兼顧，這時(shí)只能尋求其它替代方法了

將navigationStyle設(shè)為custom或titleNView設(shè)為false時(shí)，原生導(dǎo)航欄不顯示，這時(shí)就能自定義導(dǎo)航欄

"globalStyle": { "navigationStyle": "custom" }

下面是簡單測試實(shí)例：

這里要注意的是，H5、小程序、App端狀態(tài)欄都不一樣，需要重新計(jì)算處理，我這里已經(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
 }
 })
},

嘖嘖嘖，看下面的效果，是不是覺得很眼熟，沒錯(cuò)，就是基于uni-app簡單的實(shí)現(xiàn)了一個(gè)仿微信頂部導(dǎo)航條

頂部的圖標(biāo)使用iconfont字體圖標(biāo)、另外還可自定傳入圖片

<header-bar :isBack="false" title="標(biāo)題信息" 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>

<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    標(biāo)題
　　titleTintColor  標(biāo)題顏色
　　bgColor    背景
　　center    標(biāo)題居中
　　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>
   <!-- 標(biāo)題 -->
   <!-- #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>

最后附上一個(gè)基于ReactNative實(shí)現(xiàn)的自定義導(dǎo)航條的聊天室項(xiàng)目

總結(jié)

以上所述是小編給大家介紹的uni app仿微信頂部導(dǎo)航條功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: