uniapp导航栏自定义图标按钮/搜索 | 您所在的位置:网站首页 › 搜索图标图片怎么弄 › uniapp导航栏自定义图标按钮/搜索 |
uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左、居中、搜索条,按钮可传入文字/字体图标/图片 uniApp原生导航栏uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,dcloud平台对app-plus做了详细说明:app-plus配置,不过目前暂支持H5、App端,不支持小程序。 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,写在相应的页面中即可。 uniApp自定义导航栏如何实现像淘宝、微信顶部导航栏,支持标题居左、居中、搜索条、按钮自定义。。。 将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 } }) },
|
CopyRight 2018-2019 实验室设备网 版权所有 |