uni-app仿微信、淘宝顶部导航条|uniapp自定义导航栏

原创赞收藏评论

举报 2019-09-17

扫描,分享朋友圈

基于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

360截图20190916235849603.png

需在项目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" }

具体效果实例如下：

未标题-1.png

不过在 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
        }
    })
},

360截图20190916115938629.png

360截图20190916120057354.png

360截图20190916120005833.png

360截图20190916120214555.png

360截图20190916120037577.png

360截图20190916120233291.png

360截图20190916120251266.png

360截图20190916120312117.png

360截图20190807103937042.jpg

作者：xiaoyan2015
转载：https://juejin.im/post/5d806bd36fb9a06ad005a2a7
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。