caimei-applets-caimei/components/cm-custom/custom.vue

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view class='navbar-wrap'
        :style="{height:CustomBar+'px',paddingTop:StatusBar+'px',background:navbarData.bgColor ? navbarData.bgColor : ''}">
        <view class="navbar-text"
            :style="{color:navbarData.textColor ? navbarData.textColor:'',lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? '' : (capsule.height+10)+'px'}"
            :class="platformClass">
            {{navbarData.title ? navbarData.title : " "}}
        </view>
        <view class="navbar-icon" v-if="navbarData.showCapsule == 1 ? true : false"
            :style="{top:capsule.top +'px;',left:((screenWidth-capsule.right)+9)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
            <text v-if="navbarData.haveBack" @tap="BackPage" class="iconfont icon-fanhui"></text>
            <text v-if="navbarData.haveHome" @tap="_goHome" class="iconfont icon-shouye1"></text>
        </view>
    </view>
</template>

<script>
    var self;
    export default {
        name: 'headerNavbar',
        props: {
            navbarData: { // 由父页面传递的数据
                type: Object
            }
        },
        data() {
            return {
                CustomBar: this.CustomBar, // 顶部导航栏高度
                StatusBar: this.StatusBar,
                fontSizeSetting: this.fontSizeSetting,
                screenWidth: this.screenWidth,
                capsule: this.capsule,
                platformClass: this.platformClass,
            }
        },
        created() {
            if (getCurrentPages().length === 1) { // 当只有一个页面时
                this.navbarData.haveBack = false;
            } else {
                this.navbarData.haveBack = true;
            }
        },
        onLoad() {

        },
        methods: {
            BackPage: function() {
                this.$emit('navigateBack')
            },
            _goSearchPath: function() {
                this.$emit('goSearchPath')
            },
            _goHome: function() {
                uni.switchTab({
                    url: '/pages/tabBar/home/index'
                })
            }
        },
        onShow() {

        }
    }
</script>

<style lang="scss">
    .navbar-wrap {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 100000;
        box-sizing: border-box;
    }

    .navbar-text {
        font-size: 30rpx;
        color: #000000;
        font-weight: 500;
    }

    .navbar-text.center {
        text-align: center;
    }

    .navbar-text.left {
        text-align: left;
        padding-left: 45px;
    }

    .navbar-icon {
        position: fixed;
        display: flex;
        box-sizing: border-box;
    }

    .navbar-icon .iconfont {
        display: inline-block;
        overflow: hidden;
        font-size: 44rpx;
        padding-right: 40rpx;
        margin-top: 1px;
        color: #FFFFFF;
    }

    .navbar-icon view {
        height: 18px;
        border-left: 0.5px solid rgba(0, 0, 0, 0.3);
        margin-top: 6px;
    }

    .navbar-loading {
        background: #fff;
        text-align: center;
    }
</style>