使用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 是否固定 */
{{title}} />
关于使用uni app怎么实现微信顶部导航条功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享题目:使用uniapp怎么实现微信顶部导航条功能
本文URL:http://scyanting.com/article/ppppos.html