uniapp组件-uni-nav-bar自定义导航栏

今天药忘吃喽~ 2021-07-25 19:21 3016阅读 0赞

## 例1 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![20210228231119413.png][]![20210228231124757.png][]

代码

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

## 例2 ##

![20210228231947175.png][]

<template>
    	<view>
    		<uni-nav-bar color="#333333" background-color="white" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
    			<block slot="left">
    				<view class="city">
    					<view><text style="font-size: 14px">北京</text></view>
    					<uni-icons type="arrowdown" color="#333333" size="22" />
    				</view>
    			</block>
    			<view class="input-view">
    				<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666"/>
    				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
    			</view>
    		</uni-nav-bar>
    	</view>
    </template>
    
    <script>
    	export default {
    		components: {},
    		data() {
    			return {
    			}
    		},
    		methods: {
    			showCity() {
    
    				uni.showToast({
    					title: '选择城市'
    				})
    			},
    			scan() {
    				uni.showToast({
    					title: '扫码'
    				})
    			},
    			confirm() {
    				uni.showToast({
    					title: '搜索'
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.city {
    		display: flex;
    		flex-direction: row;
    		align-items: center;
    		margin-left: 4px;
    	}
    
    	.input-view {
    		display: flex;
    		flex-direction: row;
    		flex: 1;
    		background-color: #f8f8f8;
    		height: 30px;
    		border-radius: 15px;
    		padding: 0 15px;
    		flex-wrap: nowrap;
    		margin: 7px 0;
    		line-height: 30px;
    	}
    	.nav-bar-input {
    		height: 30px;
    		line-height: 30px;
    		width: 370rpx;
    		padding: 0 5px;
    		font-size: 14px;
    		background-color: #f8f8f8;
    	}
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210228230954358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210228231119413.png]: https://img-blog.csdnimg.cn/20210228231119413.png
[20210228231124757.png]: /images/20210725/52c96590de69424f901f66338dcf3a3b.png
[20210228231947175.png]: https://img-blog.csdnimg.cn/20210228231947175.png