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:capsule.height+'px;'}" @tap="handleBack" class="iconfont icon-fanhui"></text>
            <text class="iconfont icon-vertical_line" ></text>
            <text :style="{width:capsule.height+'px;'}" @tap="handleShowDr" class="iconfont icon-xiaoxi1"></text>
        </view>
    </view>
</template>

<script>
    var self
    export default {
        name: 'chatCustom',
        data() {
            return {
                CustomBar: this.CustomBar, // 顶部导航栏高度
                StatusBar: this.StatusBar,
                fontSizeSetting: this.fontSizeSetting,
                screenWidth: this.screenWidth,
                capsule: this.capsule,
                platformClass: this.platformClass,
            }
        },
        created() {

        },
        onLoad() {

        },
        methods: {
            handleBack() {
                uni.navigateBack({ delta: 1 })
            },
            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: 64rpx;
    	border: 0.5px solid rgba(0,0,0, 0.2);
    	box-sizing: border-box;
    }
    
    .navbar-icon .iconfont {
    	text-align: center;
    	display: inline-block;
    	overflow: hidden;
    }
    .navbar-icon .icon-vertical_line {
    	color: #999999;
        border-color: rgba(0,0,0,0.4);
    }
    
    .navbar-loading {
        background: #fff;
        text-align: center;
    }
</style>