uni-app之动态组件(navbar)封装（二）

下面以一个navbar为例 封装一个动态获取数据

先看下目录

navbar里面的内容

<template>
	<view class="navbar" :style="{height:statusBarHeight+navBareight+'px',background:'black'}"> <!-- 如若不写 高度始终为44 没有找到原因 -->
		<view class="narbar-flexd">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="narbar-content" :style="{height:navBareight+'px',width:windowWidth+'px'}">
				<view class="navbar-search">
					<view class="navbar-icon">
						<uni-icons type="search" size="16"></uni-icons>
						<uni-icons type="search" color='#999'></uni-icons>
					</view>
					<view class="navbar-text">搜索</view>
				</view>
			</view>
		</view>
		<view class="navHeight" :style="{height:statusBarHeight+navBareight+'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:20,
				navBareight: 45,
				windowWidth: 375
			};
		},
		created() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
				windowWidth
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.windowWidth = windowWidth
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			this.windowWidth = left
			//#endif
		}
	}
</script>

<style lang="scss">
	.navbar {
		.narbar-flexd {
			background: $navbar;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			.narbar-content {
				// height: 45px;
				padding: 0 30px;
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
			}

			.navbar-search {
				height: 32px;
				background: #fff;
				border-radius: 30px;
				width: 100%;
				display: flex;
				padding: 0 15px;
				align-items: center;
				.navbar-icon {
					margin-right: 10px;
				}
				.navbar-text {
					font-size: 12px;
					color: #666;
				}
			}
		}
		.navHeight {
			height: 60px;
		}
	}
</style>

在页面使用   使用方式和vue一样但是也可以简化 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用uni-app 

easyCom 点击去查看详情

<template>
	<view class="content">
		<navbar></navbar>
		<view v-for="item in 100" :key="item">
			{{item}}
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
</style>

2.字体图标的使用 

字体图标可以使用阿里的icons 或者使用hbuilderX里面的插件市场 找到icons 然后使用hbuilderX导入

预览结果