NavBar 导航

导航栏组件，用于页面顶部显示标题、返回按钮、左右侧图标和文本等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page :navbar="false">
		<t-navbar :class="navbarStyle" title="导航栏" :type="navbarType" @leftClick="leftClick" right-icon="setting"
			@rightClick="rightClick"></t-navbar>
		<t-card class="mlrt.30" title="Navbar 导航栏" sub-title="自定义导航栏,支持透明背景,渐变背景"></t-card>
		<t-col class="p.30">
			<t-col class="tdb-tdr-mb.30-pt.10">
				<t-section title='尺寸'></t-section>
				<t-row class="p.30-ffww">
					<t-button type='p' class="mrb.15" @click="setNav('')">默认(44px)</t-button>
					<t-button type='p' class="mrb.15" @click="setNav('h.38px')">38</t-button>
					<t-button type='p' class="mrb.15" @click="setNav('h.88px')">88</t-button>
				</t-row>
			</t-col>
			<t-col class="tdb-tdr-mb.30-pt.10">
				<t-section title='主题背景'></t-section>
				<t-row class="p.30-ffww-fais">
					<t-button type='p' class="mrb.15" @click="setType('normal')">normal</t-button>
					<t-button type='p' class="mrb.15" @click="setType('info')">info</t-button>
					<t-button type='p' class="mrb.15" @click="setType('primary')">primary</t-button>
					<t-button type='p' class="mrb.15" @click="setType('error')">error</t-button>
					<t-button type='p' class="mrb.15" @click="setType('warning')">warning</t-button>
					<t-button type='p' class="mr.15" @click="setType('success')">success</t-button>
				</t-row>
			</t-col>
			<t-col class="tdb-tdr-mb.30-pt.10">
				<t-section title='自定义背景'></t-section>
				<t-row class="p.30-ffww-fais">
					<t-button type='p' class="mrb.15" @click="setNav('bg.#00aa7f')">#00aa7f</t-button>
					<t-button type='p' class="mrb.15" @click="setNav('bir.blue,red')">渐变</t-button>
					<t-button type='p' class="mrb.15" @click="setNav('bg')">透明</t-button>
				</t-row>
			</t-col>
			<t-col class="tdb-tdr-mb.30-pt.10">
				<t-section title='插槽'></t-section>
				<t-navbar class="ba" :fixed="false">
					<template v-slot:left>
						<t-icon name="map"></t-icon>
					</template>
					<template v-slot:center>
						<t-text>自定义背景</t-text>
					</template>
					<template v-slot:right>
						<t-icon name="star-fill"></t-icon>
					</template>
				</t-navbar>
			</t-col>
		</t-col>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				navbarStyle: '',
				navbarType: 'normal'
			}
		},
		methods: {
			leftClick() {
				uni.showToast({
					title: "点击左侧图标"
				})
			},
			rightClick() {
				uni.showToast({
					title: "点击右侧图标"
				})
			},
			setNav(sty : string) {
				this.navbarStyle = sty
			},
			setType(type : string) {
				this.navbarStyle = ''
				this.navbarType = type
			}
		}
	}
</script>

Props

名称	描述	类型	默认值
title	组件的标题	String	''
showBack	是否显示返回按钮	Boolean	true
leftViewClass	左侧视图容器的类名	String	''
leftIconClass	左侧图标的类名	String	''
leftTextClass	左侧文本的类名	String	''
rightViewClass	右侧视图容器的类名	String	''
rightIconClass	右侧图标的类名	String	''
rightTextClass	右侧文本的类名	String	''
safeAreaInsetTop	是否在顶部使用安全区域嵌入	Boolean	true
placeholder	是否占位防止塌陷	Boolean	true
fixed	组件是否固定位置	Boolean	true
border	是否显示边框	Boolean	false
leftIcon	左侧图标的类名	String	'arrow-left'
leftText	左侧的文本	String	''
rightIcon	右侧图标的类名	String	''
rightText	右侧的文本	String	''
autoBack	是否自动处理返回动作	Boolean	true

Events

名称	描述	参数
leftClick	当点击返回左侧按钮时触发	-
rightClick	当点击右侧区域时触发	-

Slots

名称	描述
left	左侧内容插槽
center	中间标题插槽
right	左侧内容插槽