uni-app开发(4)---自定义导航栏开发

Dear 丶 2021-08-03 00:49 581阅读 0赞

**第1步：配置页面**

"app-plus": {
    	"scrollIndicator": "none", //隐藏滚动条
    	"bounce": "none", //关闭反弹效果
    	"titleNView": false
    }

注意："titleNView": false配置可以禁用导航栏。

--------------------

**第2步：引入官方组件uni-icon、uni-nav-bar、uni-status-bar**

备注：uni-icon.vue表示图标组件。uni-status-bar.vue组件表示状态栏组件。uni-nav-bar.vue表示导航栏组件。

--------------------

**第3步：组件分析**

<template>
    	<view class="uni-navbar">
    		<view :class="{'uni-navbar--fixed': fixed,'uni-navbar--shadow':border,'uni-navbar--border':border}" :style="{'background-color':backgroundColor}" class="uni-navbar__content">
    			
    			<uni-status-bar v-if="statusBar" />
    			
    			<view :style="{color:color}" class="uni-navbar__header">
    				
    				<view class="uni-navbar__header-btns" @tap="onClickLeft">
    					<view v-if="leftIcon.length">
    						<uni-icon :type="leftIcon" :color="color" size="24" />
    					</view>
    					<view v-if="leftText.length" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}" class="uni-navbar-btn-text">{
       { leftText }}</view>
    					<slot name="left" />
    				</view>
    				
    				<view class="uni-navbar__header-container">
    					<view v-if="title.length" class="uni-navbar__header-container-inner">{
       { title }}</view>
    					
    					<slot />
    				</view>
    				
    				<view class="uni-navbar__header-btns" @tap="onClickRight">
    
    					
    					<view v-if="rightText.length&&!rightIcon.length" class="uni-navbar-btn-text">{
       { rightText }}</view>
    					<slot name="right" />
    				</view>
    			</view>
    		</view>
    		<view v-if="fixed" class="uni-navbar__placeholder">
    			<uni-status-bar v-if="statusBar" />
    			<view class="uni-navbar__placeholder-view" />
    		</view>
    	</view>
    </template>
    
    <script>
    	import uniStatusBar from '../uni-status-bar/uni-status-bar.vue'
    	import uniIcon from '../uni-icon/uni-icon.vue'
    
    	export default {
    		name: 'UniNavBar',
    		components: {
    			uniStatusBar,
    			uniIcon
    		},
    		props: {
    			title: {
    				type: String,
    				default: ''
    			},
    			leftText: {
    				type: String,
    				default: ''
    			},
    			rightText: {
    				type: String,
    				default: ''
    			},
    			leftIcon: {
    				type: String,
    				default: ''
    			},
    			rightIcon: {
    				type: String,
    				default: ''
    			},
    			fixed: {
    				type: Boolean,
    				default: false
    			},
    			color: {
    				type: String,
    				default: '#000000'
    			},
    			backgroundColor: {
    				type: String,
    				default: '#FFFFFF'
    			},
    			statusBar: {
    				type: Boolean,
    				default: false
    			},
    			shadow: {
    				type: Boolean,
    				default: true
    			},
    			border: {
    				type: Boolean,
    				default: true
    			}
    		},
    		methods: {
    			onClickLeft() {
    				this.$emit('click-left')
    			},
    			onClickRight() {
    				this.$emit('click-right')
    			}
    		}
    	}
    </script>
    
    <style>
    	@charset "UTF-8";
    
    	.uni-navbar__content {
    		display: block;
    		position: relative;
    		width: 100%;
    		background-color: #fff;
    		overflow: hidden
    	}
    
    	.uni-navbar__content view {
    		line-height: 44px
    	}
    
    	.uni-navbar__header {
    		display: flex;
    		flex-direction: row;
    		width: 100%;
    		height: 44px;
    		line-height: 44px;
    		font-size: 16px
    	}
    
    	.uni-navbar__header-btns {
    		display: inline-flex;
    		flex-wrap: nowrap;
    		flex-shrink: 0;
    		width: 120upx;
    		padding: 0 12upx
    	}
    
    	.uni-navbar__header-btns:first-child {
    		padding-left: 0
    	}
    
    	.uni-navbar__header-btns:last-child {
    		width: 60upx
    	}
    
    	.uni-navbar__header-container {
    		width: 100%;
    		margin: 0 10upx
    	}
    
    	.uni-navbar__header-container-inner {
    		font-size: 30upx;
    		text-align: center;
    		padding-right: 60upx
    	}
    
    	.uni-navbar__placeholder-view {
    		height: 44px
    	}
    
    	.uni-navbar--fixed {
    		position: fixed;
    		z-index: 998
    	}
    
    	.uni-navbar--shadow {
    		box-shadow: 0 1px 6px #ccc
    	}
    
    	.uni-navbar--border:after {
    		position: absolute;
    		z-index: 3;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		height: 1px;
    		content: '';
    		-webkit-transform: scaleY(.5);
    		transform: scaleY(.5);
    		background-color: #c8c7cc
    	}
    </style>

备注：左侧使用click-left事件监听，右侧使用click-right事件监听，中间部分可以配置title或者使用slot插槽，使用状态栏组件来配置状态栏。

--------------------

**第4步：在组件中引入导航栏组件。**

<uni-nav-bar :statusBar="true" rightText="发布" left-icon="back" @click-left="back" @click-right="submit">
    	
    	<view class="u-f-ajc" @tap="changeLook">
    		{
       {yinsi}}
    		<view class="icon iconfont icon-xialazhankai"></view>
    	</view>
    	
    
    	
    	<view class="center-title">
    		<view class="u-f-ajc" @tap="changeLook">
    			{
       {yinsi}}
    			<view class="icon iconfont icon-xialazhankai"></view>
    		</view>
    	</view>
    	
    </uni-nav-bar>

备注：组件可以配置statusBar-是否添加状态栏，rightText-右侧文字，left-icon左侧图标，监听click-left，监听click-right，特别注意，APP端与H5端中间部分样式有些许区别，需要条件编译处理。

--------------------

**第五步：配置下拉菜单，并监听点击事件。**

备注：在export外定义变量，不需要使用this指定。

--------------------

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/e188faff731f4d8791d80b2a258d4f02.png