uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

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
        }
    })
},

 

"false" title="标题信息" titleTintColor="#fff">
    "back" class="uni_btnIco iconfont icon-arrL">
    "iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa">
    "iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb">
    
    "image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd">

 

 

 

 

 

 

 

"true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search>
    "back" class="uni_btnIco iconfont icon-arrL">
    "iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa">
    "image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd">

 

 

 

 

 

 

 

 

 

 

 

 支持传入的属性，另外还用到了vue插槽slot

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

 

 

 

 

转载CSDN博主「xiaoyan_2018」的原创文章。
原文链接：https://blog.csdn.net/yanxinyun1990/article/details/100919657