# 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>

<!--微信小程序-->
<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>

# Slots

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

# Props

参数 类型 说明 默认值
title String NavigationBar标题
color String NavigationBar标题颜色 #fff
backgroundColor String NavigationBar背景颜色 不支持RGB #fff
splitLine Boolean 是否需要分割线 false
isOpacity Boolean 是否设置不透明度 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

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

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码