自定义小程序头部

一般情况系下是默认的，先去把头部风格设为自定义

 

 因为这个头很多地方都用到，所以封装一下他

<template>
    <view class="head">
        <view class="icon" v-if="icon">
            <text class="iconfont iconzuojiantou-copy" @tap="handletoBack"></text> |
            <text class="iconfont iconshouye" @tap="handletoHome"></text>
        </view>
        {{title}}
    </view>
</template>

<script>
    export default {
        name:"musichead",
        props:['title','icon'],
        data() {
            return {
                
            };
        },
        methods:{
            handletoBack(){
                uni.navigateBack(OBJECT)
            },
            handletoHome(){
                uni.navigateTo({
                    url:'/pages/index/index'
                })
            }
        }
    }
</script>

<style scoped>
.head{
    height: 75px;
    width: 100%;
    background-color: #007AFF;
    font-size: 16px;
    line-height: 80px;
    text-align: center;
    position: relative;
}
.icon{
    position: absolute;
    left:9px;
    height: 25px;
    width: 90px;
    top:29px;
    background: rgb(0,0,0,0.4);
    line-height: 25px;
    color: white;
    border-radius: 15px;
    display: flex;
    justify-content: space-evenly;
}
</style>