uniapp自定義導航欄

uniapp專案自定義頂部導航欄

1.建立元件完整程式碼navigation.vue

<template>
    <view class="navbar-header" :style="isfixed?'padding-top'+navHeight+'px':'padding-top:0px'">
        <view class="navbar custom-class" :class="{'fixed-top':isfixed}"
            :style="{height:navHeight+'px',backgroundColor:bgColor}">
            <view class="navbar-action-wrap"
                :style="{top:navTop+'px',height:titleHeight+'px',lineHeight:titleHeight+'px'}"
                v-if="showBack || showHome">
                <view class="navbar-back" style="margin-right:20rpx" @click="navBack" v-if="showBack">
                    <u-icon name="arrow-left" size="40rpx" color="#000"></u-icon>
                </view>
                <view class="navbar-home" @click="toIndex" v-if="showHome">
                    <image :src="common.getViewImgUrl('/image/icon-add-back.png')" mode="widthFix"></image>
                </view>
            </view>
            <view class="navbar-title"
                :style="{top:navTop+'px',height:titleHeight+'px',lineHeight:titleHeight+'px'}">
                {{pageName}}
            </view>
        </view>
    </view>
</template>

<script>
    const app = getApp();
    import common from "@/utils/common";
    export default {
        name: 'navigation',
        options: {
            styleIsolation: 'apply-shared'
        },
        props: {
            pageName: {
                type: String,
                value: null
            },
            showBack: {
                type: Boolean,
                value: true
            },
            showHome: {
                type: Boolean,
                value: true
            },
            isfixed: {
                type: Boolean,
                value: true
            },
            bgColor: {
                type: String,
                value: "#fff"
            },
            isbacklogin: {
                type: Boolean,
                value: false
            },
        },
        watch: {
            show(nVal, oVal) { //是否顯示彈窗
                this.isShow = nVal;
                if (nVal) {
                    this.queryGroupNotice();
                }
            },
            isfixed(nVal, oVal) { //是否固定
                this.isShow = nVal;
                if (nVal) {
                    this.queryGroupNotice();
                }
            },
        },
        data() {
            return {
                common: common,
                systemInfo: null, //裝置資訊
                navHeight: null, //導航欄高度
                navTop: null, //導航欄頂部距離
                titleHeight: 32, //標題高度
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                var systemInfo = app.globalData.systemInfo;
                this.systemInfo = systemInfo;
                this.navHeight = systemInfo.navHeight;
                this.navTop = systemInfo.navTop;
                if (systemInfo.Custom) {
                    this.titleHeight = systemInfo.Custom.height;
                }
            },
            navBack: function() { //回退
                const url = wx.getStorageSync('local_url');
                if (this.isbacklogin) {
                    wx.reLaunch({
                        url: '/pages/login/login'
                    });
                } else {
                    wx.navigateBack({
                        delta: 1
                    })
                }
            },
            toIndex: function() { //回主頁
                //返回
                const source = wx.getStorageSync('iSSourceNc');
                const curUrl = common.getCurrentPageUrl();
                console.log(curUrl);
                if (source && curUrl.indexOf("pages/group/memberList") == '-1') {
                    wx.removeStorageSync('iSSourceNc');
                    wx.exitMiniProgram({
                        success: (res) => {}
                    })
                } else {
                    common.getWxBack();
                }
            },
            toSelectGroup: function() { //回主頁
                this.$emit('toSelectGroup');
            },
        }
    }
</script>

<style>
    .navbar-header {
        overflow: hidden;
        width: 100%;
    }

    .fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .navbar {
        width: 100%;
        min-height: 100rpx;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
    }

    .navbar-title {
        width: 100%;
        box-sizing: border-box;
        padding-left: 120rpx;
        padding-right: 120rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        position: absolute;
        left: 0;
        z-index: 10;
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .navbar-action-wrap {
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: absolute;
        left: 20rpx;
        z-index: 11;
        line-height: 1;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .navbar-home {
        width: 40rpx;
        height: 40rpx;
    }

    .navbar-home image {
        display: block;
        width: 100%;
    }

    .navi-inimg {
        margin-left: 10rpx;
        display: inline-block;
        width: 36rpx;
        vertical-align: middle;
    }

    .navi-inimg image {
        margin-top: -1rpx;
    }
</style>

2.pages.json 配置自定義

"pages": [{
    "path": "home",
    "style": {
        "navigationStyle": "custom"
    }
}]

3.頁面使用導航欄元件

<template>
　　<view>
        <navigation :isfixed="false" :show-back="false" :show-home="false" page-name="標題"></navigation>
　　</view>
</template>
<script>
    import navigation from '@/components/navigation';
    export default {
　　　　components: {
　　　　　　navigation,
　　　　},
}
</script>