【uni-app】pyh-nv插件自定义导航栏

​

pyh-nv 是一个专为 UniApp 设计的插件，用于创建和自定义导航栏。它提供了丰富的自定义选项，允许开发者根据项目需求对导航栏进行高度定制化，比如修改颜色、大小、图标以及添加自定义按钮等。本文将介绍如何使用 pyh-nv 插件在 UniApp 中实现一个自定义导航栏。

平台兼容性

​编辑​

插件安装

• uni_modules方式：在插件详情页导入插件，参考uni-app官网介绍

​编辑

• 非uni_modules方式：在插件详情页右上角uni_modules版本下载插件ZIP，解压/拉入components文件夹到 uni-app 根目录。

插件使用

在 template 中使用组件

<pyh-nv></pyh-nv>

<pyh-nv :config="{back:{hide:true}}"></pyh-nv>

<pyh-nv :config="config"></pyh-nv>

config配置说明

详细属性说明可在插件详情页查看

​编辑

常见导航栏

• 自定义风格

​编辑

import backPng from '@img/navback/back.png'

const nvConfig = ref({
  title: '自定义标题1',
  bgColor: '#F2F1F6',
  back: {
    icon: {
      path: backPng,
    },
  },
})

• 页面内容全屏

同理可设置背景渐变色

​编辑

template模板：

<view class="content">
   <pyh-nv ref="nvRef" :config="nvConfig" />
</view>

 config配置：

const nvConfig = ref({
  title: '页面内容全屏',
  bgColor: 'transparent',
  fixedAssist: {
    hide: false,
  },
  back: {
    icon: {
      path: backPng,
    },
  },
})

CSS样式：

.content {
  background: url('https://xxx.png') no-repeat;
}

• 导航栏设置检索框

​编辑

 config配置：

const nvConfig = ref({
  title: '搜索',
  type: 'search',
  bgColor: '#EFF2F5',
  back: {
    icon: {
      path: backPng,
    },
  },
  search: {
    icon: {
      hide: false, // 控制搜索图标
      color: '#BCC5CD', // 如果有传可覆盖图标颜色，否则继承颜色
      size: 18, // 图标大小，默认18
    },
    bgColor: '#fff',
    placeholder: '请输入关键词',
    placeholderStyle: 'color:#BCC5CD',
    value: '', // 如需要动态赋值，必须初始化
    input: true,
    focus: true,
    btn: {
      style: 'display:none',
    },
    maxlength: 100,
  },
})

search配置说明： 

​编辑

CSS样式：

:deep(.nvSForm) {
  height: 76rpx !important;

  .nvSBox {
    border-radius: 38rpx;
  }

  .searchPlac {
    font-size: 31rpx;
    color: #bcc5cd;
  }
}

如需监听输入事件做一些业务操作，请根据需求在组件中监听以下事件：

​编辑

细节注意

页面内容请注意需要减去导航栏的高度

<pyh-nv ref="nvRef" :config="nvConfig" />
<view :style="{ height: `calc(100vh - ${navHeight}px ) ` }"></view>

const navRef = ref(null)
/** 导航栏高度 */
const navHeight = computed(() => {
  return navRef.value?.nv?.navigatorHeight || 0
})

以上就是pyh-nv插件自定义导航栏的介绍啦^-^

​