更新记录

1.0.1（2023-10-13） 下载此版本

1.0.1自定义navbar（微信小程序自用，适配安卓、IOS）

平台兼容性

自定义导航栏（微信小程序自用，适配安卓、IOS）

组件写的比较简单，有需要改进的地方或是使用不便可以直接在组件上改动或者写在评论区，会考虑进行修改

使用方法

pages.json设置"navigationStyle": "custom"

<view>
    <miku-head title="这是标题这是标题这是标题这是标题"
                 :title-center="false"
                 :headLogo="true"
                 bgColor="rgb(251,192,45)"
                 :bgImgUrl="'../../static/1.png'"
                 :head-logo-src="'../../static/logo.png'"
                 titleColor="#fff"
                 class="miku-head">
    </miku-head>
</view>

<view>
     <miku-head title="这是标题这是标题这是标题这是标题"
                 :title-center="false"
                 :headLogo="false"
                 bgColor="rgb(251,192,45)"
                 :leftArrow="true"
                 :head-logo-src="'../../static/logo.png'"
                 titleColor="#333"
                 class="miku-head">
    </miku-head>
</view>

<view>
    <miku-head title="这是标题这是标题这是标题这是标题"
                 :title-center="true"
                 bgColor="rgb(251,192,45)"
                 :head-logo-src="'../../static/logo.png'"
                 titleColor="#333"
                 :leftArrow="true"
                 class="miku-head"
                 :font-size="34"
                 @leftArrowClick="leftArrowClick"
                 @titleClick="titleClick">
    </miku-head>
</view>

import mikuHead from "../../components/miku-head/miku-head";
export default {
    components:{
      mikuHead,
    },
    data() {
        return {

        }
    },
    methods: {
      leftArrowClick(){
        console.log('左箭头点击事件')
      },
      titleClick(){
        console.log('标题文字点击事件')
      }
    }
}

props