【uni-app】创建底部或者顶部导航栏

创建底部导航栏、自定义顶部导航栏组件

Qxn530

9397人浏览 · 2022-09-13 11:37:03

Qxn530 · 2022-09-13 11:37:03 发布

1、创建底部导航栏

（1）新建导航页面

在 pages 中新建tabBar目录，在目录下创建choose和me目录。然后在pages.json的pages中，生成新页面的默认配置代码。（不一定非要创建在一个目录下，可以独立成一个文件）

（2）配置底部导航栏结构

在 pages.json 中，配置 tabBar 注意：pages 的第一个 path 必须与 tabBar 的第一个 pagePath 相同否则不显示底部导航

"pages": [{
			"path": "pages/tabBar/choose/index",
			"style": {
				"navigationBarTitleText": "行情",
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path": "pages/tabBar/me/index",
			"style": {
				"navigationBarTitleText": "量化平台",
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white"

			}
		}
	],
	"tabBar": {
		"color": "#d4dbe3",
		"selectedColor": "#000000",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/tabBar/choose/index",
				"iconPath": "static/hqicon2.png",
				"selectedIconPath": "static/hqicon1.png",
				"text": "自选"
			},
			{
				"pagePath": "pages/tabBar/me/index",
				"iconPath": "static/gerenicon2.png",
				"selectedIconPath": "static/gerenicon1.png",
				"text": "我的"
			}
		]
	},

2、自定义顶部导航栏组件

第一个图的代码

顶部添加的内容：VIP图标、标题、背景图片

（1）在components中创建nabbar组件

<template>
	<view class="nabbar" :style="{'height': statusBarHeight + barHeight + 'px'}">
		<img src="../static/hangqingdbj.png" class="nabbar">
		<!-- //手机状态栏 -->
		<view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
		<!-- //导航栏 -->
		<view class="nabbar-box" :style="{ 'top': statusBarHeight+ 'px', 'heigth': barHeight + 'px' }">
			<view class="nabbar-cont" :style="{ width: barWidth +'px' }">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Nabbar",
		data() {
			return {
				statusBarHeight: 20,
				barHeight: 44,
				barWidth: null,
			};
		},
		mounted() {
			let that = this;
			//通过uni自带api获取手机系统信息
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res)
					that.statusBarHeight = res.statusBarHeight; //手机状态栏高度
					let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
					that.barHeight = !isiOS ? 48 : 44; //导航栏高度，iOS：48，Android：44
					that.barWidth = res.windowWidth - 87; //nabbar可操作宽度 = 屏幕宽度 - 小程序右上角的胶囊宽度（87）
				}
			})
		},
	}
</script>

<style lang="scss">
	.nabbar {
		width: 100%;
		overflow: hidden;
	}

	.status-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		// background-color: #FFFFFF;
		// height: var(--status-bar-height);
		z-index: 999;
		// background-color: #000000;
	}

	.nabbar-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 88rpx;
		// background-color: #000000;
		padding: 0 16rpx;
		z-index: 999;

		.nabbar-cont {
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>

（2）在所需页面引用

<template>
	<view class="container">
		<view-nabbar>
			<slot-one>
				<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
					<view @click="vip" style="display: flex;align-items: center;">
						<image src="../../../static/vipicon.png" style="width: 70rpx;height: 35rpx;"></image>
					</view>
					<view style="margin-left: 250rpx;color: white;font-weight: bolder;">行情</view>
				</view>
			</slot-one>
		</view-nabbar>
	</view>
</template>
<script>
	import Nabbar from '@/components/nabbar.vue';
	export default {
		components: {
			'view-nabbar': Nabbar,
		},
		data() {
			return {
				windowHeight: 0,
				barHeight: 44,
				number: '',
				id: '',
				placeholder1: "color:#8f8faf",
				placeholder: "color:white",
			}
		},
		onLoad() {
			uni.getSystemInfo({ //获取系统信息
				success: (res) => {
					// console.log(res.statusBarHeight)
					let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
					this.barHeight = !isiOS ? 48 : 44; //导航栏高度，iOS：48，Android：44
					this.windowHeight = res.statusBarHeight + this.barHeight
				}
			});
		},
	}
</script>

第二个图的代码

（1）在components中创建navbar组件

<template>
	<view class="prohibition">
		<view class="demo" :style="[{background},{color},{height},{paddingTop}]">
			<!-- 左侧返回按钮 -->
			<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]">
				<uni-icons type="arrowleft" size="30" :color='color'></uni-icons>
			</view>
			<!-- 中间标题文字 -->
			<view class="title">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				paddingTop: 0,
			}
		},
		props: {
			title: { // 标题文字(默认为空)
				type: String,
				default: ''
			},
			color: { // 标题和返回按钮颜色(默认白色)
				type: String,
				default: '#fff'
			},
			//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background: { // 背景颜色(不传值默认透明)
				type: String,
				default: 'transparent'
			},
			back: { // 是否显示返回按钮(不传值默认不显示)
				type: Boolean,
				default: false
			},
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top + "px"
		},
		methods: {
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			}
		}
	}
</script>
<style lang="less">
	.demo {
		position: relative; //注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		// position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;
		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 0;
			bottom: 0;
			left: 20rpx;
			color: #fff;
			margin: auto;
		}
		.title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
		}
	}
</style>

（2）在页面使用

<template>
	<view class="container">
		<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>
			
	</view>
</template>

<script>
	import navbar from '../../components/Navbar/index.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				backgroundColor: '#60d2e1',
				title: 'wo',
			};
		},
		methods: {
            goBack(){}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>

（3）修改pages.json

如果是全局设置，那就在globalStyle中设置

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"navigationStyle": "custom" //设置自定义导航栏
	}

如果是单页面则是在对应页面中使用

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh": false,
			"navigationStyle": "custom" //设置自定义导航栏
		}
	}]

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport