使用uniapp怎么实现微信顶部导航条功能

这篇文章将为大家详细讲解有关使用uni app怎么实现微信顶部导航条功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为张北企业提供专业的网站设计制作、成都做网站，张北网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

在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":{
   ...
  }
  }
 }
 }
},

对于如何监听按钮、输入框事件，uni-app给出了相应API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页面中即可。

 那如何可以实现像京东、淘宝、微信顶部导航栏，如加入城市定位、搜索、自定图片/图标、圆点提示。。。

上面的方法是可以满足一般项目需求，但是在小程序里则失效了，而且一些复杂的导航栏就不能很好兼顾，这时只能寻求其它替代方法了

将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏

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

下面是简单测试实例：

这里要注意的是，H5、小程序、App端状态栏都不一样，需要重新计算处理，我这里已经处理好了，可直接使用，在App.vue里面设置即可

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简单的实现了一个仿微信顶部导航条

顶部的图标使用iconfont字体图标、另外还可自定传入图片

 
 
 


 
 
 添加好友

 
 
 添加好友

支持传入的属性，另外还用到了vue插槽slot

/***
　　isBack    是否返回按钮
　　title    标题
　　titleTintColor  标题颜色
　　bgColor    背景
　　center    标题居中
　　search    搜索条
　　searchRadius  圆形搜索条
　　fixed    是否固定
*/

关于使用uni app怎么实现微信顶部导航条功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前标题：使用uniapp怎么实现微信顶部导航条功能
本文来源：http://shouzuofang.com/article/ppppos.html