uniApp Native Navigation Bar

uni-app native navigation bar can also implement some top custom buttons + search boxes, just do some configuration in page.json. Setting up app-plus, dcloud platform makes a detailed description of app-plus: app-plus configuration However, for the time being, H5 and App are supported, and small programs are not supported.

Configure app-plus in page.json

{
    "path": "pages/ucenter/index",
    "style": {
        "navigationBarTitleText": "My",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue670",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px",
                        "float": "left"
                    },
                    {
                        "text": "\ue62c",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px"
 
                    }
                ],
                "searchInput":{
                    ...
                }
            }
        }
    }
},

So how to listen for button and input box events? uni-app gives the corresponding API, just write onNavigation Bar Button Tap and onNavigation Bar Search Input Changed in the corresponding page.

uniApp custom navigation bar

How to realize the top navigation bar like the top and the top, supporting the title to stay left, center, search bar, and button customization.

When navigationStyle is set to custom or titleNView is set to false, the native navigation bar is not displayed, and then the navigation bar can be customized.

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

Examples of specific effects are as follows:

Note here that H5, applet, App status bar are different, need to re-calculate processing, I have handled here, can be used directly, in App.vue can be set up.

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

<header-bar :isBack="false" title="Heading information" titleTintColor="#fff">
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>
    <!-- <text slot="string" class="uni_btnString" @tap="ccc">Add friends</text> -->
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>
</header-bar>

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

Support for incoming attributes and also use vue slot

/***
Whether isBack returns the button
title Title
TileTintColor Title Color
Background of bgColor
center heading in the middle
Search search bar
searchRadius Round Search Bar
fixed or not
*/

<template>
    <view class="uni_topbar" :style="style">
        <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">
            <!-- Return -->
            <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->
            <view v-if="isBack" @tap="goBack">
                <slot name="back"></slot>
            </view>
            <slot name="headerL"></slot>
            <!-- Title -->
            <!-- #ifndef MP -->
            <view class="flex1" v-if="!search && center"></view>
            <!-- #endif -->
            <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">
                {{title}}
            </view>
            <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
                <input class="uni_searchIpt flex1" type="text" placeholder="search" placeholder-style="color: rgba(255,255,255,.5);" />
            </view>
            <!-- Right -->
            <view class="uni_headerRight flexbox flex_row flex_alignc">
                <slot name="iconfont"></slot>
                <slot name="string"></slot>
                <slot name="image"></slot>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                statusBarH: this.statusBar,
                customBarH: this.customBar
            }
        },
        props: {
            isBack: { type: [Boolean, String], default: true },
            title: { type: String, default: '' },
            titleTintColor: { type: String, default: '#fff' },
            bgColor: Object,
            center: { type: [Boolean, String], default: false },
            search: { type: [Boolean, String], default: false },
            searchRadius: { type: [Boolean, String], default: false },
            fixed: { type: [Boolean, String], default: false },
        },
        computed: {
            style() {
                let _style = `height: ${this.customBarH}px;`
                return _style
            }
        },
        methods: {
            goBack() {
                uni.navigateBack()
            }
        }
    }
</script>

Reprint the original article of CSDN blogger "xiaoyan_2018".
Links to the original text: https://blog.csdn.net/yanxinyun 1990/article/details/100919657