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

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view
        class="navbar-wrap"
        :class="[headerColor ? 'bg-color' : 'bg-color']"
        :style="{ height: navbarHeight + 'px', paddingTop: CustomBar / 2 + 'px' }"
    >
        <view
            class="navbar-icon"
            v-if="navbarData.showCapsule ? navbarData.showCapsule : true"
            :style="{
                top: navbarBtn.top + statusBarHeight + 'px;',
                lineHeight: navbarBtn.height + 'px;',
                left: 12 + 'px;',
                width: navbarBtn.height + 'px;',
                height: navbarBtn.height + 'px;'
            }"
        >
            <text v-if="haveBack" @click="_goBack" class="iconfont icon-daohangfanhui"></text>
            <text v-else @click="_goHome" class="iconfont icon-fanhuishouye"></text>
        </view>
        <view
            class="navbar-text"
            :style="{
                top: navbarBtn.top + statusBarHeight + 'px;',
                height: navbarBtn.height + 'px;',
                fontSize: fontSizeSetting + 'px;'
            }"
        >
            商品详情
        </view>
    </view>
</template>

<script>
var self
export default {
    name: 'headerNavbar',
    props: {
        navbarData: {
            // 由父页面传递的数据
            type: Object
        },
        systeminfo: {
            type: Object
        },
        headerBtnPosi: {
            type: Object
        },
        page: {
            type: Number
        },
        headerColor: {
            type: Boolean
        },
        headerTitle: {
            type: String
        },
        type: {
            type: String
        }
    },
    data() {
        return {
            headerType: '',
            CustomBar: this.CustomBar, // 顶部导航栏高度
            clickPath: '/search/pages/search/search',
            haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
            statusBarHeight: 0, // 状态栏高度
            navbarHeight: 0, // 顶部导航栏高度,
            navbarBtn: {
                // 胶囊位置信息
                height: 0,
                width: 0,
                top: 0,
                bottom: 0,
                right: 0
            },
            platform: '',
            fontSizeSetting: 0
        }
    },
    created() {
        this.headerType = this.type
        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
        }
        console.log(btnPosi)
        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.$parent.navbarHeight = this.navbarHeight)
        this.$parent.statusBarHeight = this.statusBarHeight
        // console.log(this.navbarHeight);
        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: 100000;
    box-sizing: border-box;
    &.bg-color {
        animation: showColor 0.3s ease-in-out both;
    }
    &.no-color {
        animation: hideColor 0.3s ease-in-out both;
    }
}
.navbar-text {
    width: 100%;
    color: #000000;
    font-weight: 500;
    position: fixed;
    text-align: center;
}
.gosearch-btn {
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    font-size: 28rpx;
    color: #999999;
    position: relative;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    .icon-sousuo {
        height: 100%;
        text-align: center;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 34rpx;
        color: #999999;
        z-index: 10;
    }
    .input {
        height: 100%;
        float: left;
        font-size: $font-size-24;
        text-align: left;
    }
}
.navbar-icon {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    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 {
    flex: 1;
    font-size: 30rpx;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.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;
}
@keyframes showColor {
    0% {
        background: rgba(255, 255, 255, 0);
    }
    50% {
        background: rgba(255, 255, 255, 0.5);
    }
    100% {
        background: rgba(255, 255, 255, 1);
    }
}
@keyframes hideColor {
    0% {
        background: rgba(255, 255, 255, 1);
    }
    50% {
        background: rgba(255, 255, 255, 0.5);
    }
    100% {
        background: rgba(255, 255, 255, 0);
    }
}
</style>