uni-app custom navigation bar-solve adaptation problems

Preface

• In actual development, we develop based on requirements, prototype diagrams, and functional color matching. We do not consider whether the component can be realized.

• When we don’t need to jump to the home page, there will be layouts such as left-shifted titles, gradient colors, input boxes, etc. The native navigation bar does not meet the needs.

• At this time, we need to customize the navigation bar. uni-app does provide css variables to tell us the height of the mobile phone system bar and the height of the capsule button, but when we write hard, the layout of the page will be destroyed due to different models. This is because The resolution and scaling of different mobile phones are different, which will lead to differences in the system bar and capsule buttons. This is what will happen if we write a high degree of globalization.

• Thinking about it from another angle, why can WeChat’s own encapsulated code adapt to these problems? It’s because it brings height to life. We only need to call the api when entering the page for the first time. Obtaining the mobile phone system bar and capsule button can solve these problems.

Code implementation - can be copied directly

<template>
    <view class="content">
        <!-- 背景导航栏 -->
        <view class="background-plate" :style="{ height:titleheight + titletop + 10 + 'px'}">
        </view>
        <!-- 标题 -->
        <view class="status_bar" :style="{ height:titleheight + 'px',top: titletop + 'px'}">
            <text>自定义导航栏</text>
        </view>
        <!-- 内容 -->
        <view class="content-statistics" :style="{ paddingTop:titleheight + titletop + 10 + 'px'}">
​
        </view>
    </view>
</template>
​
<script>
    export default {
        data() {
            return {
                // 胶囊按钮高度
                titleheight: 0,
                // 胶囊到顶部距离
                titletop: 0,
            }
        },
        onLoad() {
            // 或许胶囊按钮各种参数
            this.getHeight()
        },
​
        methods: {
            getHeight() {
                let res = uni.getMenuButtonBoundingClientRect();
                this.titletop = res.top;
                this.titleheight = res.height
                console.log(res);
                console.log("titletop的值", this.titletop);
                console.log("titleheight的值", this.titleheight);
                console.log("一半的titleheight的值", this.titleheight / 2);
            },
​
        }
    }
</script>
​
<style lang="scss">
    .content {
        .background-plate {
            width: 100vw;
            background: skyblue;
            position: fixed;
            left: 0;
            z-index: 5;
        }
​
        .status_bar {
            width: 100vw;
            position: fixed;
            left: 0;
            line-height: 64rpx;
            padding-left: 32rpx;
            z-index: 10;
​
            text {
                font-size: 36rpx;
                font-family: PingFang SC-Heavy, PingFang SC;
                font-weight: 800;
                color: #FFFFFF;
            }
        }
    }
</style>

---

Summarize:

After this process, I believe you also have a preliminary deep impression on the uni-app custom navigation bar - solving the adaptation problem, but the situation we encounter in actual development is definitely different, so we need to understand it The principle never changes without departing from its origin. Come on, hit the workers!

Please point out any shortcomings, thank you - Feng Guo Wuhen