android n自定义导航栏,高性能自定义导航栏 v2.0重构版，支持nvue

最新推荐文章于 2021-12-27 11:30:42 发布

空卡空卡空空卡

最新推荐文章于 2021-12-27 11:30:42 发布

阅读量402

点赞数

文章标签： android n自定义导航栏

更新记录

2.0.7(2021-05-05)

插件迁移至uni_modeules，功能未改变

2.0.6(2020-10-09)

修复滑动切换时图标颜色不变成白色的问题

新增滑动切换标题，满足滑动显示，滑动隐藏，滑动切换

// title 属性的四种使用方式

// 第一种方式

config:{ title: '这里是新疆' }

// 第二种

config:{ title: ['这里是新疆', '大美新疆'] }

// 第三种

config:{ title: ['这里是新疆', ''] }

// 第四种

config:{ title: ['', '这里是新疆'] }

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

3.1.0 app-vue app-nvue

√

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

Edge

Firefox

pc-Safari

√

hx-navbar 适用于 uni-app 项目的头部导航组件

导航栏组件，主要用于头部导航，组件名：hx-navbar

本组件目前兼容微信小程序、H5、5+APP。

本组件支持模式：

普通固定顶部导航

透明导航

透明固定顶部导航

不固定普通导航

背景颜色线性渐变

滑动显示背景

左、中、右3个插槽；可关闭左右插槽使中间插槽铺满导航，实现高度自定义的导航需求

提示

因为有的用户还在使用v1.0，建议前往v1.0项目示例及文档

QQ交流群 954035921

如有问题可进群发图讨论

使用前提

建议下载示例项目运行

uni_modules方式导入的插件无需注册组件即可使用

使用 HBuilderX 导入插件即可

非uni_modules使用方式注册

页面使用需在 script 中引用组件

import hxNavbar from "@/components/hx-navbar/hx-navbar"

export default {

components: {hxNavbar}

}

全局使用需在 main.js 中注册组件

import hxNavbar from "./components/hx-navbar/hx-navbar"

Vue.component('hx-navbar',hxNavbar)

滑动切换注意事项

必须使用 ref 和 Scroll 事件，否则滑动切换无效

export default {

Scroll(e) {

// 重点，用到滑动切换必须加上

this.$refs.hxnb.pageScroll(e);

}

属性

基本属性

名称

类型

默认值

描述

back

Boolean

true

返回上一页，如果为首页请设置为false

backTxt

String

返回图标边的文字,小程序无效

backTabPage

String

返回指定的 tab 页面

backPage

String

返回指定的普通页面

height

String

44px

导航栏高度(不包含状态栏高度)

fixed

Boolean

true

固定头部

barPlaceholder

Boolean

true

导航栏占位符，一般使用滑动显示导航栏时才为false

title

String,Array

导航标题,有两种写法 title:'我爱新疆' 和 title:['我爱新疆','欢迎您'],数组可满足滑动显示，滑动隐藏，滑动切换

font

String

图标字体Class名，如何使用自定义图标请查看示例项目1

fontSize

String

'18px'

文字大小，一般不需要啊调整

color

String,Array

#333333

文字颜色(如果需要屏幕滑动后变色，参数则为数组，例子：['#000000','#ffffff'])

backgroundColor

Array

#ffffff

背景颜色;参数一：透明度;参数二：背景颜色(array则为线性渐变[1,['#24bdab','#80c54c']])

slideBackgroundColor

Array

null

滑动后背景颜色,参数一：透明度;参数二：背景颜色,长度必须和上一个一样长(array则为线性渐变[1,['#24bdab','#80c54c']])

backgroundColorLinearDeg

String

导航背景线性渐变角度

backgroundImg

String

null

背景图片,单一背景图['/static/xj.jpg'], 滑动切['/static/xj.jpg','/static/xk.jpg',1,1] 参数说明：第一张图片，第二张图，第一张图透明度，第二张图透明度

leftButton

Obj

null

左侧按钮，详细查看下方 leftButton

rightButton

Obj

null

右侧按钮，详细查看下方 rightButton

Obj

null

搜索栏，详细查看下方 search

shadow

Boolean

false

导航栏阴影

border

Boolean

false

导航栏边框

关于状态栏的属性

名称

类型

默认值

描述

statusBar

Boolean

true

包含状态栏

statusBarFontColor

Array,String

#000000

状态栏字体颜色，只支持#000000和#FFFFFF(如果需要屏幕滑动变色，参数则为数组，例子：['#000000','#ffffff'])

statusBarBackground

Array,String

null

状态栏背景色，(如果需要屏幕滑动变色，参数则为数组，例子：['#24bdab','#80c54c'])

// statusBarBackground 多种用法

// 普通用法

statusBarBackground: '#80c54c',

// 滑动后由透明转为有颜色 '#80c54c'

statusBarBackground: ['', '#80c54c'],

// 滑动变色，一种颜色变另一种颜色

statusBarBackground: ['#24bdab','#80c54c'],

插槽属性

可下载项目示例查看

名称

类型

默认值

描述

leftSlot

bool

false

左插槽

leftSlotSwitch

bool

false

左滑动切换插槽

centerSlot

bool

false

中间插槽(注：设置后标题title属性失效)

centerSlotSwitch

bool

false

中间滑动切换插槽

rightSlot

bool

false

右插槽

rightSlotSwitch

bool

false

右滑动切换插槽

maxSlot

bool

false

填充满导航栏的插槽，使用该插槽就不要用其他插槽 (我认为是个无意义的插槽)

maxSlotSwitch

bool

false

填充满导航栏的滑动切换插槽

leftButton 和 rightButton 属性

名称

类型

默认值

描述

key

num,string

null

唯一标识，按钮点击事件会用到

icon

String

null

字体图标，如果使用自己的请先设置 font 属性

txt

String

null

图标旁的文字，一般地址功能和城市功能才用到

color

String

随导航栏字体颜色

icon 图标的颜色，一般动态设置如收藏功能

position

left, right

right

图标居于文字的 left 或 right

@clickBtn

按钮点击事件

返回被点击对象

按钮点击事件，可根据key来识别，进行操作

可以设置多个按钮，建议每边不超过3个按钮，带文字的不超过2个按钮，也就是两边总共不超过6个按钮

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

//背景颜色;参数一：透明度(0-1);参数二：背景颜色(array则为线性渐变，string为单色背景)

backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

// 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 Scroll 事件

slideBackgroundColor: [0,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

// 状态栏，数组则为滑动变色

statusBarBackground:['','#ffffff'],

rightButton:[{

key: 'btn1',

icon: '',

position: 'left'

},{

key: 'btn2',

icon: '',

position: 'left'

},{

key: 'btn3',

icon: '',

position: 'left'

}],

}

Scroll(e) {

// 重点，用到滑动切换必须加上

this.$refs.hxnb.pageScroll(e);

methods: {

onClickBtn(data){

//console.log(data);

uni.showToast({

title: `key为 ${data.key} 的按钮`,

icon:'none',

duration: 1300

});

}

search 属性

设置后 title 将失效

名称

类型

默认值

描述

value

string

null

搜索框默认值

placeholder

String

请输入搜索内容

搜索框提示信息

disabled

bool

false 没禁止

是否禁止输入，一般会禁止输入然后跳转到指定的搜索页

@searchClick

输入框点击事件

当点击了搜索框时触发，这时候可以进行操作，如跳转到指定的搜索页

@searchConfirm

输入后点完成的事件

{value: txt}

当点击了完成或回车则会触发，返回输入的内容

export default {

data() {

return {

config:{

back: false,

title: '这里是新疆',

color: '#ffffff',

search: {

value:'',

placeholder: '',

disabled: false

leftButton:[{

key: 'btn1',

icon: '',

txt: '新疆',

position: 'left'

}],

}

methods: {

// 当输入完点击完成时触发

searchConfirm(data){

//console.log(data.value);

uni.showToast({

title: `输入了${data.value}`,

icon:'none',

duration: 1300

});

// 当点击了搜索框时触发

searchClick(data){

uni.showToast({

title: `点击了搜索框`,

icon:'none',

duration: 1300

});

}

一些简单使用例子

简单使用

背景颜色线性渐变、头部固定

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

//背景颜色;参数一：透明度(0-1);参数二：背景颜色(array则为线性渐变，string为单色背景)

backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

}

滑动切换背景

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

//背景颜色;参数一：透明度(0-1);参数二：背景颜色(array则为线性渐变，string为单色背景)

backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

// 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 Scroll 事件

slideBackgroundColor: [1,['#24bdab','#24bdab','#80c54c','#80c54c']],

}

Scroll(e) {

// 重点，用到滑动切换必须加上

this.$refs.hxnb.pageScroll(e);

}

滑动隐藏背景

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

//背景颜色;参数一：透明度(0-1);参数二：背景颜色(array则为线性渐变，string为单色背景)

backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

// 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 Scroll 事件

slideBackgroundColor: [0,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],

}

Scroll(e) {

// 重点，用到滑动切换必须加上

this.$refs.hxnb.pageScroll(e);

}

设置背景图

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

// 背景图片(array则为滑动切换背景图，string为单一背景图)

// backgroundImg: ['/static/xj.jpg','/static/logo.png'],

backgroundImg: '/static/xj.jpg',

}

滑动切换背景图

export default {

data() {

return {

config:{

title: '这里是新疆',

color: '#ffffff',

// 背景图片(array则为滑动切换背景图，string为单一背景图)

backgroundImg: ['/static/xj.jpg','/static/xk.jpg',1,0.4],

}

Scroll(e) {

// 重点，用到滑动切换必须加上

this.$refs.hxnb.pageScroll(e);

}

空卡空卡空空卡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android n自定义导航栏,高性能自定义导航栏 v2.0重构版，支持nvue

更新记录2.0.7(2021-05-05)插件迁移至uni_modeules，功能未改变2.0.6(2020-10-09)修复滑动切换时图标颜色不变成白色的问题新增滑动切换标题，满足滑动显示，滑动隐藏，滑动切换// title 属性的四种使用方式// 第一种方式config:{ title: '这里是新疆' }// 第二种config:{ title: ['这里是新疆', '大美新疆'] }//...
复制链接

扫一扫