nav封装及绑定动态图

<template>
	<view>
		<view class="nav" :style="{'background':bgColor,'border-bottom':borderBottom}">
			<image :src="leftIcon" class="nav-img" @click="goBack"></image>
			<view class="nav-title" :style="{'color':textColor,'font-size':fontSize+'rpx'}">{{navCenter}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'Nav',
		props:{
			//左侧图标
			leftIcon:{
				type:String,
				//用/做根路径来引入图片，不然无法显示
				default:'/static/icons/leftBlack.png'
			},
			//nav背景色
			bgColor:{
				type:String,
				default:'#fff'
			},
			//中间字体内容
			navCenter:{
				type:String,
				default:'钱包大健康撒'
			},
			//中间字体颜色
			textColor:{
				type:String,
				default:'#000'
			},
			//中间字体大小
			fontSize:{
				type:String,
				default:'36'
			},
			//下边框
			borderBottom:{
				type:String,
				default:'none'
			}
		},
		methods:{
			goBack(){
				//获取页面栈，页面刷新时navigateBack就不能返回，让父组件自定义跳转页面
				var current = getCurrentPages();
				if(current.length > 1){
					uni.navigateBack();
				}else{
					this.$emit('back');
				}
			}
		}
	}
</script>

<style scoped>
	.nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		z-index: 3;
		box-sizing: border-box;
		text-align: center;
	}

	.nav-img{
		position: absolute;
		top: 50%;
		left: 20rpx;
		width: 40rpx;
		height: 40rpx;
		transform: translateY(-50%);
	}
</style>