大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用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,只需把onNavigationBarButtonTaponNavigationBarSearchInputChanged,写在响应的页面中即可。

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

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

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

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

下面是简单测试实例:

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

这里要注意的是,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字体图标、另外还可自定传入图片

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


 
 
 
 
 

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

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

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


 
 
 


 
 
 添加好友

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

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

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


 
 
 添加好友

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

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

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


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


文章名称:使用uniapp怎么实现微信顶部导航条功能
文章转载:http://dzwzjz.com/article/ppppos.html
在线咨询
服务热线
服务热线:028-86922220
TOP