# NavBar

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

# 示例代码-结构

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

# 示例代码

<script>
	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;
		}
	};
</script>

# 脚本说明

# 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] isOpcity 为true时生效, opcity=scrollTop /windowWidth * scrollRatio 0.3
isCustom Boolean 是否自定义header内容 false
isImmersive Boolean 是否沉浸式 true
isFixed Boolean 是否固定 true
backdropFilter Boolean 是否开启高斯模糊效果[仅在支持的浏览器有效果],为true时maxOpacity设置小于1的值 false
dropDownHide Boolean 下拉隐藏NavigationBar,主要针对有回弹效果ios端 false
zIndex [Number, String] z-index值 9998

# methods

名称 描述
@init 初始化信息,回传数据
@change opcity随滚动距离改变

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/navigation-bar/navigation-bar

# H5二维码

# 小程序二维码