Swiper中文论坛

标题: uni-app导航栏自定义按钮+文字+搜索框|仿微信顶部导航条 [打印本页]
作者: xiaoyan2015    时间: 2019-9-18 13:54
标题: uni-app导航栏自定义按钮+文字+搜索框|仿微信顶部导航条

运用uni-app开发的uniapp自定义导航栏|仿微信、淘宝顶部导航条，支持背景渐变、标题居左/居中、搜索条，圆点提示，按钮可自定义传入文字/字体图标/图片
在uni-app中实现导航效果，一是通过原生导航栏、二是自定义导航栏。

UniApp原生导航配置：
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，dcloud平台对app-plus做了详细说明：app-plus配置，不过目前暂支持H5、App端，不支持小程序。




如上图，通过配置page.json里面的app-plus选项即可实现
  1. {
  2.     "path": "pages/ucenter/index",
  3.     "style": {
  4.         "navigationBarTitleText": "我的",
  5.         "app-plus": {
  6.             "titleNView": {
  7.                 "buttons": [
  8.                     {
  9.                         "text": "\ue670",
  10.                         "fontSrc": "/static/iconfont.ttf",
  11.                         "fontSize": "22px",
  12.                         "float": "left"
  13.                     },
  14.                     {
  15.                         "text": "\ue62c",
  16.                         "fontSrc": "/static/iconfont.ttf",
  17.                         "fontSize": "22px"

  19.                     }
  20.                 ],
  21.                 "searchInput":{
  22.                     ...
  23.                 }
  24.             }
  25.         }
  26.     }
  27. },
复制代码


UniApp自定义导航配置：
如何实现像微信、京东顶部导航栏，支持标题居左、居中、搜索条、按钮自定义。。。 将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏
"globalStyle": { "navigationStyle": "custom" }


效果如下图：

H5、小程序、App端顶部状态栏高度处理
  1. onLaunch: function() {
  2.         uni.getSystemInfo({
  3.                 success:function(e){
  4.                         Vue.prototype.statusBar = e.statusBarHeight
  5.                         // #ifndef MP
  6.                         if(e.platform == 'android') {
  7.                                 Vue.prototype.customBar = e.statusBarHeight + 50
  8.                         }else {
  9.                                 Vue.prototype.customBar = e.statusBarHeight + 45
  10.                         }
  11.                         // #endif
  12.                        
  13.                         // #ifdef MP-WEIXIN
  14.                         let custom = wx.getMenuButtonBoundingClientRect()
  15.                         Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
  16.                         // #endif
  17.                        
  18.                         // #ifdef MP-ALIPAY
  19.                         Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
  20.                         // #endif
  21.                 }
  22.         })
  23. },
复制代码



  1. <header-bar :isBack="false" title="标题信息" titleTintColor="#fff">
  2.     <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
  3.     <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>
  4.     <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>
  5.     <!-- <text slot="string" class="uni_btnString" @tap="ccc">添加好友</text> -->
  6.     <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
  7. </header-bar>
复制代码
实现了如下效果，做了一张大图：

  1. /**
  2. * @tpl 顶部导航模板（自定义） by andy  Q：282310962
  3. */
  4. <template>
  5.     <view class="uni_topbar" :style="style">
  6.         <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
  7.             <!-- 返回 -->
  8.             <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
  9.             <view v-if="isBack" @tap="goBack">
  10.                 <slot name="back"></slot>
  11.             </view>
  12.             <slot name="headerL"></slot>
  13.             <!-- 标题 -->
  14.             <!-- #ifndef MP -->
  15.             <view class="flex1" v-if="!search && center"></view>
  16.             <!-- #endif -->
  17.             <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
  18.                 {{title}}
  19.             </view>
  20.             <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
  21.                 <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
  22.             </view>
  23.             <!-- 右侧 -->
  24.             <view class="uni_headerRight flexbox flex_row flex_alignc">
  25.                 <slot name="iconfont"></slot>
  26.                 <slot name="string"></slot>
  27.                 <slot name="image"></slot>
  28.             </view>
  29.         </view>
  30.     </view>
  31. </template>

  33. <script>
  34.     export default {
  35.         data() {
  36.             return {
  37.                 statusBarH: this.statusBar,
  38.                 customBarH: this.customBar
  39.             }
  40.         },
  41.         props: {
  42.             isBack: { type: [Boolean, String], default: true },
  43.             title: { type: String, default: '' },
  44.             titleTintColor: { type: String, default: '#fff' },
  45.             bgColor: Object,
  46.             center: { type: [Boolean, String], default: false },
  47.             search: { type: [Boolean, String], default: false },
  48.             searchRadius: { type: [Boolean, String], default: false },
  49.             fixed: { type: [Boolean, String], default: false },
  50.         },
  51.         computed: {
  52.             style() {
  53.                 let _style = `height: ${this.customBarH}px;`
  54.                 return _style
  55.             }
  56.         },
  57.         methods: {
  58.             goBack() {
  59.                 uni.navigateBack()
  60.             }
  61.         }
  62.     }
  63. </script>
复制代码







欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2