最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子:
因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现不了,但是我还是回头看了看文档,才发现,这个功能是可以实现的,只需要在pages.json中做一些配置即可
这个在官方称作app-plus,可以自定义导航区域,具体配置如下:
"pages": [ { "path": "pages/index/index", "style": { "navigationBarBackgroundColor": "#00c170", "app-plus": { "bounce": "none", "titleNView": { "buttons": [ { "text": "地图", "fontSize":"16", "float": "right", "color":"#fff" }, { "text": "唐山", "fontSize":"16", "float": "left", "color":"#fff" } ], "searchInput":{ "align": "center", "placeholder": "请输入查找房源信息", "borderRadius":"50upx", "backgroundColor": "#fff" } } } } }
]
效果如下:
你可能会问,我的点击事件和输入框事件如何监听?
uni-app给出了相应的api,onNavigationBarButtonTap和onNavigationBarSearchInputChanged,写在响应的页面中即可:
扫描二维码关注公众号,回复:
5736822 查看本文章
export default { onNavigationBarButtonTap() { console.log("你点击了按钮") }, onNavigationBarSearchInputChanged () { console.log("你输入了信息") } }
打印结果:
但是按钮有两个,只有一个按钮事件怎么办?还有输入框的文字如何获取?其实这两个函数接收一个值,就是相对应的信息:
export default { onNavigationBarButtonTap(val) { console.log(val) }, onNavigationBarSearchInputChanged (val) { console.log(val) } }
打印结果:
按钮事件根据对应的text判断即可,而输入框监听的不是change事件,是input事件,即输入后即可监听到而不是失焦
详细配置可查阅官方文档: 传送门
如果还不够详细,来这里