tui-navigation-bar 自定义导航栏

介绍

NavigationBar自定义导航栏，支持自定义NavigationBar内容，支持渐变，支持沉浸式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue"
export default {
	components:{
		tuiNavigationBar
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-navigation-bar": "/components/thorui/tui-navigation-bar/tui-navigation-bar"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

组件默认支持透明渐变，可通过设置 isOpacity 属性值为false，让导航栏默认显示。

splitLine 属性设置底部是否带分割线，scrollTop 属性为滚动条滚动距离，title 属性为NavigationBar标题，backgroundColor 属性为NavigationBar背景颜色,不支持RGB ，color 属性为NavigationBar标题颜色。

init 事件：导航栏初始化信息，回传导航栏相关信息。

change 事件：在滚动条距离改变时触发，回传对应的opacity值。

<!--uni-app-->
<tui-navigation-bar splitLine @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" title="NavBar自定义导航栏" backgroundColor="#fff" color="#333">
 <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
   <tui-icon name="arrowleft" :color="opacity > 0.85 ? '#333' : '#fff'" @click="back"></tui-icon>
 </view>
</tui-navigation-bar>

// data 数据 及 方法
export default {
 data() {
 	return {
 		top: 0, //标题图标距离顶部距离
 		opacity: 0,
 		scrollTop: 0.5
 	}
 },
 methods: {
 	initNavigation(e) {
 		this.opacity = e.opacity;
 		this.top = e.top;
 	},
 	opacityChange(e) {
 		this.opacity = e.opacity;
 	},
 	back() {
 		uni.navigateBack();
 	}
 },
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop;
 }
}

/* 样式 */
.tui-header-icon {
	width: 100%;
	position: fixed;
	top: 0;
	padding: 0 12rpx;
	display: flex;
	align-items: center;
	height: 32px;
	transform: translateZ(0);
	z-index: 99999;
	box-sizing: border-box;
}

<!--微信小程序-->
<tui-navigation-bar splitLine bindinit="initNavigation" bindchange="opcityChange" scrollTop="{{scrollTop}}" title="NavBar自定义导航栏" backgroundColor="#fff" color="#333">
 <view class="tui-header-icon" style="margin-top:{{top}}px">
   <tui-icon name="arrowleft" color="{{opacity > 0.85 ? '#333' : '#fff'}}" bindclick="back"></tui-icon>
 </view>
</tui-navigation-bar>

// data 数据 及 方法
Page({
  data: {
    top: 0, //标题图标距离顶部距离
    opacity: 0,
    scrollTop: 0.5
  },
  initNavigation(e) {
   this.setData({
     opacity:e.detail.opacity,
     top:e.detail.top
   })
 },
 opcityChange(e) {
   this.setData({
     opacity:e.detail.opacity
   })
 },
 back() {
   wx.navigateBack();
 },
 onPageScroll(e) {
   this.setData({
     scrollTop:e.scrollTop
   })
 }
})

/* 样式 */
.tui-header-icon {
	width: 100%;
	position: fixed;
	top: 0;
	padding: 0 12rpx;
	display: flex;
	align-items: center;
	height: 32px;
	transform: translateZ(0);
	z-index: 99999;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

# Slots

插槽名称	说明
default	导航栏内自定义显示内容

# Props

属性名	类型	说明	默认值
title	String	NavigationBar标题
color	String	NavigationBar标题颜色	#fff
backgroundColor	String	NavigationBar背景颜色不支持RGB，设置渐变色时 isOpacity 属性需设置为false	#fff
splitLine	Boolean	是否需要分割线	false
isOpacity	Boolean	是否设置不透明度，设置渐变色时不支持，且值需要设置为false	true
maxOpacity	[Number, String]	不透明度最大值 0-1	1
transparent	Boolean	背景透明（设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）	false
scrollTop	[Number, String]	滚动条滚动距离	0
scrollRatio	[Number, String]	isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）	0.3
isCustom	Boolean	是否自定义NavigationBar内容	false
isImmersive	Boolean	是否沉浸式	true
isFixed	Boolean	是否固定	true
backdropFilter	Boolean	是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值	false
dropDownHide	Boolean	下拉隐藏NavigationBar，主要针对有回弹效果ios端	false
zIndex	[Number, String]	z-index值	9998

# Events

注：uni-app端绑定事件使用@前缀，如@init；微信小程序原生使用bind前缀，如bindinit

事件名	说明	回调参数
init	导航栏初始化信息，回传导航栏相关信息	{ width:导航栏宽度, height:导航栏高度, left:左边界坐标(px), top:上边界坐标(px), statusBarHeight:Number, opacity:不透明度, windowHeight:Number }
change	在滚动条距离改变时触发，回传对应的opacity值	{opacity:Number}