tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
825
3.3m

标题导航 xNavbar ​

预览

介绍 ​

标题导航,用途页面头部标题。可以默认透明，滚动实现背景可变的标题导航。使用时放置在页面的最顶部

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-navbar/x-navbar.uvue

使用 ​

ts

<x-navbar></x-navbar>

Props 属性 ​

名称说明类型默认值
isPlace是否底部占位内容，如果为false底部悬空。你的页面内容将自动压在导航栏的底部。
booleantrue
bgColor背景颜色，注意这是静态时的背景色。
string'white'
darkBgColor暗黑的背景颜色。
string"#000000"
activeBgColor背景颜色，这是滑动时超过指定本状态栏高度时自动渐变到此颜色
如果为空时，不会有动态背景
如果提供的是白或者黑，暗黑时自动取反。
string''
backColor返回按钮的颜色.默认是取titleColor，如果你单独定义了
以你定义的为准
string''
title标题
string'标题'
titleColor默认标题颜色，暗黑是取白，如果有其它需求建议插槽。
string'#333333'
titleActiveColor动态悬浮时标题颜色,如果为暗黑时，你提供的颜色为白或者黑会反色
如果提供的是彩色自动加深或者提亮
string'#333333'
titleFontSize标题文字大小
string'17'
lrWidth右边的宽度。
string'100'
llWidth左边的宽度。
string'100'
zIndex层级。
number90
backErrorPath左边按钮默认点击返回上页。
但如果上页返回失败（通常见于直接程序启动本面，无法进行上页返回时）
失败后返回的页面。默认是首页。
string'/pages/index/index'
showNavBack是否显示返回按钮。
booleantrue
linearGradient渐变背景，如果提供，上面的BgColor背景和暗黑背景将失效。
例：['to right','#ff667f','#ff5416']
string[]() : string[] => [] as string[]
linearActiveGradient动态悬浮时的渐变背景，
提供后上面的 activeBgColor的背景和暗黑背景将失效。
例：['to right','#ff667f','#ff5416']
string[]() : string[] => [] as string[]
staticTransparent静态在顶部时是否透明背景
booleanfalse
maxWidth某些时候你可能需要设定最大宽
任意单位;设置为none时表示不设置.
仅web生效
string'none'
height这个高不是最终高,它只是导航高
状态栏高是自动的不包含在这里面.
单位为像素单位,不是rpx
number50

Events 事件 ​

名称参数说明
fixedChange-当滚动页面时，导航栏位置
与滚动之间的距离差比（0~1）
0表示在顶部，1表示已经超过了导航高
主要是用来类型滚动时设置导航顶部的一些布局变化。
initheight: number初始化完成向下发送一个事件用于告知本组件实际的高

Slots 插槽 ​

名称说明数据
left左边插槽isFiexd: boolean
title标题插槽isFiexd: boolean
right右边插槽isFiexd: boolean

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/navbar

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-navbar :staticTransparent="staticTransparent" :linear-gradient="linear" :linearActiveGradient="bgcolor"
		bg-color="primary" @fiexdChange="navPosChange" title-color="white" active-bg-color="#ff5416"
		title-active-color="yellow" :isPlace="false">
		<template v-slot:title>
			<view class="flex flex-row flex-row-center-center relative flex-1" style="height:100%">
				<x-input placeholder="模仿下淘宝搜索吧" icon-color="#ff5416" round="20" v-if="ratio>0" left-icon="search-2-line"
					height="36" dark-bg-color="white" :style="{opacity:ratio,width:(ratio*100).toString()+'%'}">
					<template v-slot:inputRight>
						<x-button color="#ff5416" round="20" class="mr-2" height="32" width="60">搜索</x-button>
					</template>
				</x-input>
				<x-text v-if="ratio<1" :style="{opacity:(1-ratio),pointerEvents:'none'}" color='white'
					dark-color="white" class="absolute">NAVBAR 标题栏</x-text>
			</view>
		</template>
		<template v-slot:right="{isFiexd}">
			<x-icon class="mr-16" name="account-circle-line" font-size="21"
				:color="(isFiexd as boolean)?'yellow':'white'"></x-icon>
		</template>
	</x-navbar>
	<view>
		<x-image height="500px" src="https://picsum.photos/750/750"></x-image>
	</view>

	<x-sheet :margin="['16']">
		<x-text font-size="18" class=" text-weight-b">标题导航 xNavbar</x-text>
		<x-text class=" text-grey  line-8">可静态悬浮在顶部，也可动态悬浮顶部下拉动态改变背景</x-text>
	</x-sheet>
	<x-sheet height="2000">
		<x-text font-size="18" class=" text-weight-b ">滚动本页面，查看导航效果</x-text>
		<x-text class=" text-grey  my-20">可静态和悬浮时出现不同的渐变背景</x-text>
		<x-button :block="true" @click="setbgcolor">切换渐变导航</x-button>
		<x-text class=" text-grey  my-20">可静态和悬浮时出现不同的纯色背景</x-text>
		<x-button :block="true" @click="clearBgcolor">纯色背景</x-button>
		<x-text class=" text-grey  my-20">可静态时不透明</x-text>
		<x-button :block="true"
			@click="staticTransparent=!staticTransparent">{{!staticTransparent?'静态透明':'静态不透明'}}</x-button>
	</x-sheet>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	const ratio = ref(0)
	const bgcolor = ref<string[]>([])
	const linear = ref<string[]>([])
	const staticTransparent = ref(true)
	// #ifdef MP
	// 微信需要在页面上开启滚动事件。其它平台不需要。
	onPageScroll(()=>{})
	// #endif
	const setbgcolor = () => {
		bgcolor.value = ['to right', '#ff338f', '#6b3eff']
		linear.value = ['to right', '#02a7ff', '#22e192']
	}

	const clearBgcolor = () => {
		bgcolor.value = [] as string[]
		linear.value = [] as string[]
	}

	const navPosChange = (posratio : number) => {
		ratio.value = posratio
	}
</script>

<style lang="scss">

</style>
最近更新