uni-app自定义导航栏按钮

1.支持H5、App端(在page.json里配置app-plus)

监听按钮、输入框事件，把onNavigationBarButtonTap和onNavigationBarSearchInputChanged写在响应的页面中。

{"path": "pages/search/search","style": {"navigationBarTitleText": "","app-plus": {"titleNView": {"buttons": [{"text": "搜索","fontSize": "16px","float": "left"},]}}}
},

2.想要自定义适配多端（包括小程序）的导航栏，可以考虑隐藏原生的，自己定义一个。
首先将原生导航栏隐藏掉

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

其次根据不同端分别设置导航栏。
App.vue

onLaunch: function() {uni.getSystemInfo({success:function(e){Vue.prototype.statusBar = e.statusBarHeight// #ifndef MPif(e.platform == 'android') {Vue.prototype.customBar = e.statusBarHeight + 50}else {Vue.prototype.customBar = e.statusBarHeight + 45}// #endif// #ifdef MP-WEIXINlet custom = wx.getMenuButtonBoundingClientRect()Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight// #endif// #ifdef MP-ALIPAYVue.prototype.customBar = e.statusBarHeight + e.titleBarHeight// #endif}})
},

查询

3.已经封装好的组件

参考网址：https://www.cnblogs.com/xiaoyan2017/p/11531238.html

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！