uniapp封装了个简单的导航栏

电玩女神 2022-10-07 10:59 199阅读 0赞

没有做的很华丽，业务正好有需要  
![在这里插入图片描述][20210617211039754.png_pic_center]  
![在这里插入图片描述][20210617211102723.png_pic_center]  
代码：

<template>
    	<view class="navbar">
    		<view class="navbar-content" :style="{background:color}">
    			<image v-if="!isBlack" @click="backBtn" src="" mode="aspectFit"></image>
    			<image v-if="isBlack" @click="backBtn" src="" mode="aspectFit"></image>
    			<view :style="{color:fontcolor}">{
       {titleText}}</view>
    			<view class="placeholder-view"></view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {}
    		},
    		props: {
    			titleText: {//导航栏标题
    				type: String,
    				default: ''
    			},
    			isBlack: {//商品详情设置为true
    				type: Boolean,
    				default: false
    			},
    			color: {//背景色
    				type: String,
    				default: '#F5F7F7'
    			},
    			fontcolor: {//标题文字颜色
    				type: String,
    				default: '#282c2c'
    			}
    		},
    		methods: {
    			backBtn() {
    				this.$emit('backBtn');
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.navbar {
    		position: fixed;
    		top: 0;
    		z-index: 9999;
    		width: 100%;
    		height: 90rpx;
    		.navbar-content {
    			padding: 30rpx;
    			display: flex;
    			justify-content: space-between;
    			align-items: center;
    			image {
    				width: 40rpx;
    				height: 40rpx;
    			}
    			view {
    				font-size: 36rpx;
    				text-align: center;
    			}
    			.placeholder-view{
    				width: 40rpx;
    				height: 40rpx;
    			}
    		}
    	}
    </style>

[20210617211039754.png_pic_center]: /images/20221005/8a83f4fe12244fb8a9221bbe9e9562d1.png
[20210617211102723.png_pic_center]: /images/20221005/8f0ec6883e7542caae11839546e65617.png