card-wechat/src/components/NavHeader.vue

<template>
    <div
        class="header"
        style="height:44px"
        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
    >
        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
        <span class="name" :style="{ color: fontColor }" v-if="this.colorType !== 'light'"><slot></slot></span>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            colorType: 'light'
        };
    },
    computed: {
        ...mapState(['systemInfo']),
        fontColor() {
            if (this.colorType == 'light') {
                return '#fff';
            } else {
                return '#000';
            }
        },
        bgColor() {
            if (this.colorType == 'light') {
                return 'rgba(255,255,255,0)';
            } else {
                return 'rgba(255,255,255,1)';
            }
        }
    },
    onPageScroll(e) {
        if (e.scrollTop > 50) {
            this.colorType = 'dark';
            wx.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#ffffff',
                animation: {
                    duration: 300
                }
            });
        } else {
            this.colorType = 'light';
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#000000',
                animation: {
                    duration: 300
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.header {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 20;
    transition: all ease-in-out 0.3s;
    padding: 0 15px;
    .flex();

    .name {
        padding: 0 100px;
        position: absolute;
        left: 0;
        right: 0;
        height: 44px;
        bottom: 0;
        font-size: 17px;
        font-weight: bold;
        color: #000000;
        line-height: 44px;
        text-align: center;
        z-index: 0;
    }

    ._van-icon {
        position: relative;
        z-index: 2;
    }
}
</style>