uniapp组件-uni-nav-bar自定义导航栏_李疆的博客

例1

代码

<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" title="标题" @clickLeft="back" />
		<br>
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" left-text="返回" title="标题" @clickLeft="back" @clickTitle="clickTitle" />
		<br>
		<uni-nav-bar left-icon="arrowleft" right-text="菜单" left-text="返回" title="标题" @clickLeft="back"  @clickTitle="clickTitle" @clickRight="showMenu"/>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '点击了菜单'
				})
			},
			clickLeft() {

				uni.showToast({
					title: '左侧按钮'
				})
			},
			clickTitle() {

				uni.showToast({
					title: '点击了标题'
				})
			}
		}
	}
</script><template>
	<view>
		<uni-nav-bar