uni |
您所在的位置:网站首页 › uniapp导航栏搜索框 › uni |
基于uni-app实现的仿微信、京东顶部导航,支持背景渐变、标题居左/居中、搜索条,圆点提示,按钮可自定义传入文字/字体图标/图片 uniapp原生导航 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,dcloud平台对app-plus做了详细说明:app-plus配置,不过目前暂支持H5、App端,不支持小程序。 app-plus详细讲解:https://uniapp.dcloud.io/collocation/pages?id=app-plus RN聊天室项目:https://cloud.tencent.com/developer/article/1496681 需在项目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":{ ... } } } } },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 } }) },作者:xiaoyan2015转载:https://juejin.im/post/5d806bd36fb9a06ad005a2a7来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |