更新记录

1.0.0（2021-07-20）

第一版

平台兼容性

如果有问题插件市场评论区留下五星好评即可

兼容性

App + H5 + 微信小程序（其他平台未测试）

功能

两种类型导航 deNav正常类型导航（左边返回，中间文字，右边按钮）

• 是否开启返回
• 自定义文字，文字是否居中（或者居左）
• 是否开启右边按钮
• 右边添加了自定义插槽，可自己编写

searchNav搜索导航（左边按钮，中间搜索，右边按钮）

• 左右两边按钮添加了自定义插槽，可自己编写
• 带搜索框，有搜索记录（获取本地缓存，可清空记录），自定义搜索提示文字
• 搜索列表添加了自定义插槽，可自己编写

引入插件

单独引入，在需要使用的页面上 import 引入即可

<template>
  <view>
    <customHead></customHead>
  </view>
</template>

<script>
  import customHead from "@/components/xy-customhead/xy-customhead.vue"
  export default {
    components: {
      customHead
    }
  }
</script>

全局引入，main.js中 import 引入并注册即可全局使用

import customHead from "@/components/xy-customhead/xy-customhead.vue"
Vue.component('customHead', customHead)

自定义导航需要隐藏原生导航 pages.json加上如下配置：

单个页面隐藏原生导航

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationStyle":"custom" //隐藏当前页原生导航
        }
    }
],

全局隐藏原生导航

"globalStyle": {
  "navigationStyle": "custom" //全局隐藏原生导航
}

deNav设置默认值

<template>
    <view>
        <customHead mode='deNav' 
            :title='headtitle' 
            :textAlign='textAlign' 
            :isReturn='isReturn'
            :colorMode='colorMode'
            :colorType='colorType'
            :RbtnMode='RbtnMode'
            @Rbtn='handleRbtn'
        >
        </customHead>
    </view>
</template>

<script>
    import customHead from '@/components/xy-customhead/xy-customhead.vue'
    export default {
        components: {
          customHead
        },
        data () {
          return {
            headtitle: '首页', // 文字
            textAlign: false, // 文字是否居中，默认居中
            isReturn: true, // 是否开启返回箭头，默认关闭
            colorMode: true, // 是否开渐变背景，默认开启
            colorType: 'green', // 渐变背景颜色 red/yellow/blue/green 默认green
            RbtnMode: true, // 是否开右边按钮，默认关闭
          }
        },
        methods: {            
            //左边按钮事件
            handleLbtn(){
                console.log('用户点击了左边按钮')
            }
        }
    }
</script>

searchNav设置默认值

<template>
    <view>
        <customHead mode='searchNav'
            :title='headtitle'
            :searchTips='searchTips'
            :searchLists='searchLists'
            :colorMode='colorMode'
            :colorType='colorType'
            @Lbtn='handleLbtn'
            @Rbtn='handleRbtn'
            @searchConfirm='searchConfirm'
        >
        </customHead>
    </view>
</template>
<script>
    import customHead from '@/components/xy-customhead/xy-customhead.vue'
    export default {
        components: {
          customHead
        },
        data () {
          return {
            headtitle: '首页', // 右边按钮文字
            searchTips: '请输入关键字', // 搜索框提示文字
            searchLists: ['热门1','热门2','热门3','热门4','热门5','热门6'], // 热门搜索列表
            colorMode: true, // 是否开渐变背景，默认开启
            colorType: 'green', // 渐变背景颜色 red/yellow/blue/green 默认green
          }
        },
          methods: {

            //左按钮事件
            handleLbtn(){
                console.log('用户点击了左边按钮')
            },
            //右按钮事件
            handleRbtn(){
                console.log('用户点击了左边按钮')
            },
            //搜索事件
            searchConfirm(e){
                if(e!=''){
                    console.log('用户搜索了'+e)
                }
            }
        }
    }
</script>

参数

事件

插槽使用

支持一些可自定义化的插槽，如替换左右文字或图标，可使用插槽，使用方法如下：

<customHead>
  <view slot="customRbtn">菜单</view>
</customHead>

自定义插槽元素样式交给开发者自由调整，searchNav下左右两边自定义文字最多两个超出隐藏，插槽仅提供预留位置。

其他插槽见下。

插槽