NavBar

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

组件结构

<template>
	<view
		class="tui-navigation-bar"
		:class="{ 'tui-bar-line': opcity > 0.85 && splitLine, 'tui-navbar-fixed': isFixed }"
		:style="{ height: height + 'px', backgroundColor: `rgba(${backgroundColor},${opcity})` }"
	>
		<view class="tui-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
		<view class="tui-navigation_bar-title" :style="{ opacity: opcity, color: color, paddingTop: top - statusBarHeight + 'px' }" v-if="title && !isCustom">{{ title }}</view>
		<slot />
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiNavigationBar',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
title String NavigationBar标题
color String NavigationBar标题颜色 #fff
backgroundColor String NavigationBar背景颜色 rgb 86,119,252
splitLine Boolean 是否需要分割线 false
isOpcity Boolean 是否设置不透明度 true
scrollTop [Number, String] 滚动条滚动距离 0
scrollRatio [Number, String] isOpcity 为true时生效, opcity=scrollTop /windowWidth * scrollRatio 0.3
isCustom Boolean 是否自定义header内容 false
isImmersive Boolean 是否沉浸式 true
isFixed Boolean isFixed 是否固定

methods

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

示例

H5预览地址

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

H5二维码

小程序二维码