caimei-applets-caimei/pages/user/chats/components/chat-custom.vue

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view class='navbar-wrap'
        :style="{height:CustomBar+'px',paddingTop:StatusBar+'px',background:navbarData.bgColor ? navbarData.bgColor : '#f5f4f6'}">
        <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"
            :style="{top:capsule.top +'px;',left:((screenWidth-capsule.right)+5)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
            <text :style="{width:navbarBtn.height+'px;'}" @tap="handleBack" class="iconfont icon-fanhui"></text>
            <text :style="{width:navbarBtn.height+'px;'}" @tap="handleShowDr" class="iconfont icon-xiaoxi"></text>
        </view>
    </view>
</template>

<script>
    var self
    export default {
        name: 'chatCustom',
        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: {
            handleBack() {
                this.$emit('navigateBack')
            },
            handleShowDr() {
                this.$emit('showDr')
            }
        },
        onShow() {

        }
    }
</script>

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

    .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;
    	 border-radius: 50%;
    	 text-align: center;
    	 background: rgba(255,255,255,0.6);
    	 border: 0.5px solid rgba(0,0,0, 0.1);
    	 box-sizing: border-box;
    	 z-index: 9999;
    }
    
    .navbar-icon .iconfont {
    	 height: 100%;
    	 width: 100%;
    	 font-size: 38rpx;
    	 font-weight: bold;
    	 display: inline-block;
    	 overflow: hidden;
    }
    .navbar-icon view {
    	 height: 18px;
    	 border-left: 0.5px solid rgba(0,0,0, 0.3);
    	 margin-top: 6px;
    }

    .navbar-icon .icon-xiaoxi {
        color: #FF5B00;
    }

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