uniapp小程序自定义头部导航

我们在开发小程序时，自带的头部导航样式往往不能满足需求，故只能自定义导航，接下来简要介绍下如何实现：

1. 去除自带的头部导航

要想自定义头部导航，首先要到pages.json文件夹中，找到对应页面，然后在style中写上代码：

// 找到对应页面，在style中写下所需代码
{
   "path": "pages/about/apply",
   "style": {
       "navigationStyle": "custom"  // 注意一定要书写此行代码
   }
}

2.封装自定义的头部导航

一个小程序，可能会有多个页面会使用到自定义的头部导航，所以为了方便使用，可以将导航封装为一个组件，具体代码如下：

1.html代码

<template>
  <view class="custom-nav">
    <view
      class="my-nav"
      :style="[{ background }, { color }, { height }, { paddingTop }]"
    >
      <!-- 左侧返回按钮 -->
      <view
        class="left"
        @click="onBack"
        v-if="back"