Comment implémenter une barre de navigation personnalisée dans Uniapp-uni-app-php.cn

Comment implémenter une barre de navigation personnalisée dans Uniapp

coldplay.xixi

Libérer： 2020-12-17 10:22:33

original

9440 Les gens l'ont consulté

Uniapp implémente une méthode de personnalisation de la barre de navigation : à l'aide d'une vue, le code est [, 】.

Comment implémenter une barre de navigation personnalisée dans Uniapp

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1, cette méthode convient à toutes les marques d'ordinateurs .

Recommandé (gratuit) : Tutoriel de développement d'uni-app

uniapp implémente une barre de navigation personnalisée Méthode :

Fermez la barre de navigation par défaut sur une seule page

"navigationStyle": "custom"

Copier après la connexion

Les paramètres officiellement obtenus sont

Comment implémenter une barre de navigation personnalisée dans Uniapp

Détails des paramètres

Comment implémenter une barre de navigation personnalisée dans Uniapp

Principe de mise en œuvre

Utilisez une vue, padding-top=top;height=height;padding-bottom=Donnez-en une que vous aimez Value + rpx

code implémenté

<template>
    <view>
        <view :style="&#39;height:&#39; +  demo.height + &#39;px;&#39; + &#39;padding-top:&#39; + demo.top + &#39;px;padding-bottom:10rpx&#39;">
            <view :style="&#39;top:&#39; + demo.top + &#39;px&#39;">
                <view class="iconfont icon-xiaoxi"></view>
            </view>
            测试辣
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                demo: {
                    top: 0,
                    height: 0
                }
            }
        },
        created () {
            const demo = uni.getMenuButtonBoundingClientRect()
            this.demo.top = demo.top
            this.demo.height = demo.height
        }
    }
</script>
<style>
    .demo{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        font-size: 26rpx;
        .left{
            float: left;
            position: absolute;
            width: max-content;
            height: max-content;
            top: 0;
            bottom: 0;
            left: 20rpx;
            margin: auto;
            .iconfont{
                color: #3C3C3C;
            }
        }
    }
</style>

Copier après la connexion

effet

Comment implémenter une barre de navigation personnalisée dans Uniapp