pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

更新记录

1.6.0（2024-01-16）下载此版本

优化css代码格式

1.5.9（2023-12-14）下载此版本

修复返回键自定义图标覆盖问题

1.5.8（2023-09-19）下载此版本

兼容pc端浏览小程序时胶囊处理

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

pyh-nv 导航栏组件，组件名：pyh-nv，代码块： pyh-nv。

使用方式：

uni_modules:

uni_modules使用方法；

非uni_modules: 如何从插件市场下载使用组件 uni-app插件市场的插件详情页，右上角uni_modules版本下载插件ZIP，解压/拉入components文件夹到 uni-app 根目录

在 main.js 中引用组件 (示例项目main.js有注释，去掉对应注释可以直接使用)


import nv from "@/components/pyh-nv/pyh-nv.vue";
// #ifndef VUE3
Vue.component("pyh-nv",nv)
// #endif
// #ifdef VUE3
//在const app = createSSRApp(App)后添加
app.component('pyh-nv',nv)
// #endif

在 template 中使用组件


<pyh-nv></pyh-nv>

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

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

在 script 中 config 说明

所有配置都为选填,无需要可以不配置,不复杂!!!
所有配置都为选填,无需要可以不配置,不复杂!!!
所有配置都为选填,无需要可以不配置,不复杂!!!

config 属性说明：

属性名	类型	默认值	说明
title	String	'pyh-nv'	标题,默认值为getApp().globalData.NAME或组件内title写死的字符串；标题可以使用config配置修改
show	Boolean	true	是否显示导航栏，可以用于多情形控制导航栏的显示,model模型不受影响固定为true
sysncTitle	Boolean	true	单页面h5端是否开启同步导航栏（比如微信导航栏）
position	Object	{}	定位属性，position->type为fixed和absoult都是固定定位，其它值为静态导航栏，随页面滚动，position->top目前仅model模式可用
back	Object		导航栏返回键配置,详细见下方back说明
model	Boolean	false	是否页面内独立使用模型，如果是固定定位，top为导航栏高度
mainColor	String	''	导航的活动态颜色，可覆盖getApp().globalData.mainColor，仅部分导航栏有用到（搜索、tab切换）
bgImage	String	''	导航栏背景图,如果使用，则bgColor无效
bgColor	String	'#ffffff'	导航栏背景色,transparent值为透明底；如果使用渐变色，transparent渐变配置失效
color	String	'#000000'	导航栏和状态栏字体色，也用于渐变完成时字体色（状态栏字体只支持#000000或#ffffff）
shadow	String	''	导航栏阴影样式，同css的box-shadow用法
componentBgColor	String	'#f8f8f8'	导航栏组件背景色(可被覆盖)，如果有设置，回到首页的返回键有背景色
type	String	'default'	导航栏类型(默认为通用),还有logo和search以及slot
componentsFlex	String	'center'	type为search或image(只控制图片)时的组件内容flex布局align-items属性，内容居上（top）、中(center/middle/auto)、下(bottom)
safeArea	Number	安全高度	暂时只用于控制滚动显示，比如回到顶部
toTop	Object		是否使用回到顶部，有该属性就是使用,详细见下方toTop说明
windowInfo	Object	{}	可填入width、height 、statusBarHeight来自定义窗口大小，如{width:667,height:375,statusBarHeight:0},单位为px,不传则为uni.getSystemInfoSync()的值
logo	Object		导航栏logo的配置,仅type为logo或search时有效,详细见下方logo说明
search	Object		导航栏含搜索框的配置,仅type为search时有效,详细见下方search说明
transparent	Object		导航栏渐变配置,详细见下方transparent说明
fixedAssist	Object		固定/绝对定位时辅助容器,{hide:false,bgColor:''}
address	Object		导航栏左地址配置,{province:'广东省',color:""},填入color会固定字体色
btn	Array	[]	导航栏右方按钮组,{text:'点击1',style:''},{icon:'',text:'',badge:{text:'1',style:''}}
tabArr	Array	[]	导航栏中间tab切换,{title:'',active:true,hide:false}(说明：active为初始化活动态选项，hide为隐藏选项)

pyh-nv.vue 内配置说明：

涉及到全局变量getApp().globalData

属性名	类型	默认值	说明
title	String	'pyh-nv'	标题默认值,getApp().globalData.NAME或自定义字符串
show	Boolean	true	是否显示导航栏,可以通过getApp().globalData.nvShow来全局设置,model模型不受影响固定为true
sysncTitle	Boolean	true	h5端是否开启同步导航栏（比如微信导航栏）,为全局设置,也通过修改getApp().globalData.sysncTitle来设置
mainColor	String	'#2b9939'	导航栏的活动态颜色，可以通过getApp().globalData.mainColor或自定义颜色，也可以单组件传mainColor设置，目前仅部分导航栏有用到（搜索、tab切换）

config 内 back 配置说明：

属性名	类型	默认值	说明
hide	Boolean	false	是否隐藏返回按钮
iconForce	Boolean	false	是否固定返回图标为返回键(不做home判断)
customEvent	Boolean	false	是否监听并自定义右上角返回键事件，如果为true，默认的返回事件失效，需要组件上写@nvBackTap来监听和自定义事件
icon	Object	{path,homePath,style}	自定义图标配置，homePath和style可不传，如果存在icon和icon.path，则覆盖默认返回键

config 内 toTop 配置说明：

属性名	类型	默认值	说明
duration	Number	300	回到顶部的滚动动画时间（ms）
style	String	''	样式配置

config 内 logo 配置说明：

属性名	类型	默认值	说明
src	String	'/static/logo.png'	logo路径
url	String	''	如果传值,点击logo会reLaunch到该url
style	String	'width:60rpx'	样式配置,图片默认为withFix,只传height为heightFix,宽高都传为aspectFill

config 内 search 配置说明：

属性名	类型	默认值	说明
value	String	''	input的初始值，如需动态赋值，必须初始化
bgColor	String	'#f8f8f8'	组件背景色,覆盖 componentBgColor
color	String	''	字体以及图标颜色，不填使用默认图标颜色，和继承的字体颜色
icon	Object		如果不传，默认显示搜索图标，{hide:false,color:"",size:18}
input	Boolean	false	输入框提示语样式
url	String	''	input为false时生效,点击跳转到url
linkType	String	''	input为false时生效,点击(uni[linkType])到url
focus	Boolean	false	是否自动聚焦
border	String	''	输入框边框样式
placeholder	String	'搜索'	输入框提示语
placeholderStyle	String	''	输入框提示语样式
btn	Object		input为true时生效,搜索框提交按钮,{text:'搜索',style:''}
confirmType	String	'search'	同官方input的confirm-type,设置回车键文字

config 内 transparent 配置说明：

属性名	类型	默认值	说明
type	String	'background'	渐变类型,content为全透明渐变
anchor	Number	当前导航栏高度	最终渐变位置
initColor	String	'#ffffff'	导航栏与状态栏初始色,（状态栏字体只支持#000000或#ffffff）
reverse	Boolean	false	是否反向渐变，为true时，渐变隐藏

组件pyh-nv 事件说明(详情请参考示例项目)：

事件名	说明
nvBackTap	返回键点击自定义事件,会取消返回事件,back.customEvent为true时生效
nvLogoTap	点击logo,仅logo存在时生效
nvAddressTap	点击地址,仅地址存在时生效
nvInput	输入框input事件,仅search.input为true时生效
nvInputTap	输入框点击自定义事件
nvFormSubmit	输入框确认事件,仅search.input为true时生效
nvBtnTap	右方按钮组点击事件,仅右方按钮存在时生效
nvTabTap	中间tab组点击事件,仅中间tab按钮存在时生效

ref 事件说明(详情请参考示例项目)：

事件名	参数类型	参数默认值	说明
setStyle	Object	{}	直接设置导航栏最外层元素样式
pageScroll	Object	{scrollTop:0}	传递页面滚动信息

感谢：

有更多优化建议和需求，请联系作者 panyh 。谢谢！

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏导航栏 自定义 渐变 状态栏 多端兼容

更新记录

1.6.0（2024-01-16）下载此版本

1.5.9（2023-12-14）下载此版本

1.5.8（2023-09-19）下载此版本

平台兼容性

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

日期区间picker

swiper商品组

轻量级swiper切换（解决swiper组件数据多时过卡）

pyh-ps 图片编辑

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏 导航栏 自定义 渐变 状态栏 多端兼容

更新记录

1.6.0（2024-01-16） 下载此版本

1.5.9（2023-12-14） 下载此版本

1.5.8（2023-09-19） 下载此版本

平台兼容性

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏

日期区间picker

swiper商品组

轻量级swiper切换（解决swiper组件数据多时过卡）

pyh-ps 图片编辑

Modal title

pyh-nv 全自定义、全兼容、全功能、多类型、可渐变导航栏导航栏自定义渐变状态栏多端兼容

1.6.0（2024-01-16）下载此版本

1.5.9（2023-12-14）下载此版本

1.5.8（2023-09-19）下载此版本