caimei-applets-hehe/components/cm-module/headerNavbar/header-cart.vue

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view class="navbar-wrap" :style="{ height: navbarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
        <view
            class="navbar-text"
            :style="{ lineHeight: navbarHeight - statusBarHeight + 'px;', fontSize: fontSizeSetting + 'px;' }"
        >
            {{ navbarData.title ? navbarData.title : ' ' }}
        </view>
        <view
            class="navbar-icon"
            v-if="navbarData.showCapsule ? navbarData.showCapsule : true"
            :style="{
                width: headerBtnPosi.width + 'px;',
                lineHeight: navbarBtn.height + 'px',
                top: navbarBtn.top + statusBarHeight + 'px;',
                left: navbarBtn.right + 'px;',
                height: navbarBtn.height + 'px;'
            }"
        >
            <text v-if="haveBack" @click="_goBack" class="iconfont icon-daohangfanhui"></text>
            <text
                v-if="haveBack"
                class="iconfont icon-vertical_line"
                :style="{ borderColor: navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.4)' }"
            ></text>
            <text @click="_goHome" class="iconfont icon-fanhuishouye"></text>
        </view>
    </view>
</template>

<script>
var self
export default {
    name: 'headerNavbar',
    props: {
        navbarData: {
            // 由父页面传递的数据
            type: Object
        },
        systeminfo: {
            type: Object
        },
        headerBtnPosi: {
            type: Object
        },
        page: {
            type: Number
        }
    },
    data() {
        return {
            haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
            statusBarHeight: 0, // 状态栏高度
            navbarHeight: 0, // 顶部导航栏高度
            navbarBtn: {
                // 胶囊位置信息
                height: 0,
                width: 0,
                top: 0,
                bottom: 0,
                right: 0
            },
            platform: '',
            fontSizeSetting: 0,
            screenWidth: 0
        }
    },
    created() {
        this.fontSizeSetting = this.systeminfo.fontSizeSetting
        let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
        let headerPosi = this.headerBtnPosi // 胶囊位置信息
        /**
         * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
         * 菜单按键宽度： 87
         * 菜单按键高度： 32
         * 菜单按键左边界坐标： 278
         * 菜单按键上边界坐标： 26
         * 菜单按键右边界坐标： 365
         * 菜单按键下边界坐标： 58
         */
        let btnPosi = {
            // 胶囊实际位置，坐标信息不是左上角原点
            height: headerPosi.height,
            width: headerPosi.width,
            // 胶囊top - 状态栏高度
            top: headerPosi.top - statusBarHeight,
            // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
            bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
            // 屏幕宽度 - 胶囊right
            right: this.systeminfo.screenWidth - headerPosi.right
        }
        let haveBack
        if (getCurrentPages().length === 1) {
            // 当只有一个页面时
            haveBack = false
        } else {
            haveBack = true
        }
        ;(this.haveBack = haveBack), // 获取是否是通过分享进入的小程序
            (this.statusBarHeight = statusBarHeight),
            (this.navbarHeight = headerPosi.bottom + btnPosi.bottom), // 原胶囊bottom + 现胶囊bottom
            (this.navbarBtn = btnPosi)
    },
    onLoad() {},
    methods: {
        _goBack: function() {
            uni.navigateBack({
                delta: this.page
            })
        },
        _goHome: function() {
            uni.switchTab({
                url: '/pages/tabBar/index/index'
            })
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
.navbar-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #f8f8f8;
}
.navbar-text {
    text-align: center;
    color: #000000;
    font-weight: 500;
}
.navbar-icon {
    position: fixed;
    display: flex;
    padding: 0 10rpx;
    justify-content: space-around;
    align-items: center;
    border-radius: 64rpx;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
.navbar-icon .iconfont {
    font-size: 36rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.navbar-icon .iconfont.icon-daohangfanhui,
.navbar-icon .iconfont.icon-fanhuishouye {
    flex: 1;
}

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