【项目】UniApp实战多端企业网盘全栈开发 8 自定义导航栏【二】

本是古典何须时尚 2024-03-22 14:54 70阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  8 自定义导航栏【二】

![在这里插入图片描述][3204f7850fa742288d9189f6526add53.png_pic_center]

##### 8 自定义导航栏【二】 #####

我们将上一次导航栏稍微封装一下

<template>
    	<view>
    		<uni-status-bar></uni-status-bar>
    		<view style="height: 44px;" class="flex border-bottom align-center">
    			<view class="flex-1 flex">
    				<text class="font-md ml-3" style="margin-left: 30rpx;">首页</text>
    			</view>
    			<view class="flex-1 flex justify-center"></view>
    			<view class="flex-1 flex justify-end">
    				<view style="width: 60rpx;height: 60rpx;"
    					class="flex align-center justify-center bg-light rounded-circle mr-3">
    					<text class="iconfont icon-zengjia"></text>
    				</view>
    				<view style="width: 60rpx;height: 60rpx;"
    					class="flex align-center justify-center bg-light rounded-circle mr-3">
    					<text class="iconfont icon-gengduo"></text>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
    	export default {
    		components: {
    			uniStatusBar
    		},
    	}
    </script>
    
    <style>
    </style>

![在这里插入图片描述][10d4e2c6bf3d44f3a05eb022e141f063.png_pic_center]

但是就这样直接用，会有一些问题

![在这里插入图片描述][1a24e317ea3b4ceda130923d53de0a64.png_pic_center]

这样这个顶部不会固定在顶部，所以要改一下

![在这里插入图片描述][26270a95c4bf4534b4f16a7b9fd1260c.png_pic_center]

这样就可以固定在顶部了

还有个问题就是现在的导航栏会挡住原本的内容

![在这里插入图片描述][18a35fbd46a5400ba7178db62eb88fdd.png_pic_center]

所以要做一个占位

<view>
    			<uni-status-bar></uni-status-bar>
    			<view style="height: 44px;"></view>
    		</view>

![在这里插入图片描述][050a14338567496f961c98233e22a2a6.png_pic_center]

现在要做切换，如果选中了一些内容，导航栏需要进行改变

【插槽】

自定义组件 `nav-bar.vue`

<template>
    	<view>
    		<view class="fixed-top bg-white">
    			<uni-status-bar></uni-status-bar>
    			<view style="height: 44px;" class="flex border-bottom align-center">
    				<view class="flex-1 flex">
    					<slot name="left"></slot>
    				</view>
    				<view class="flex-1 flex justify-center">
    					<slot></slot>
    				</view>
    				<view class="flex-1 flex justify-end">
    					<slot name="right"></slot>
    				</view>
    			</view>
    		</view>
    		
    		
    		<view>
    			<uni-status-bar></uni-status-bar>
    			<view style="height: 44px;"></view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
    	export default {
    		components: {
    			uniStatusBar
    		},
    	}
    </script>
    
    <style>
    </style>

`index.vue`

<template>
    	<view>
    		
    		<nav-bar>
    			<text slot='left' class="font-md ml-3">首页</text>
    			<template slot='right'>
    				<view style="width: 60rpx;height: 60rpx;"
    					class="flex align-center justify-center bg-light rounded-circle mr-3">
    					<text class="iconfont icon-zengjia"></text>
    				</view>
    				<view style="width: 60rpx;height: 60rpx;"
    					class="flex align-center justify-center bg-light rounded-circle mr-3">
    					<text class="iconfont icon-gengduo"></text>
    				</view>
    			</template>
    		</nav-bar>
    
    		<view class="bg-danger" style="height: 1000px;">123</view>
    	</view>
    </template>
    
    <script>
    	import navBar from '@/components/common/nav-bar.vue'
    	export default {
    		components: {
    			navBar
    		},
    		data() {
    			return {}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    </style>

![在这里插入图片描述][59ef5ffad5e64879b98a4f28c5026193.png_pic_center]

效果不受影响。

[3204f7850fa742288d9189f6526add53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/950ea4d6cf0047cea35d46758f376e24.png
[10d4e2c6bf3d44f3a05eb022e141f063.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/095abe43665343a6b8d78ec1b9475432.png
[1a24e317ea3b4ceda130923d53de0a64.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5901e79b5fdd4ae386bcde6cccdc6876.png
[26270a95c4bf4534b4f16a7b9fd1260c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a0cc8e838c014dfcab8dd1dea6923eb3.png
[18a35fbd46a5400ba7178db62eb88fdd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/67c343f9ccdf43c09e5f4157542e6fc8.png
[050a14338567496f961c98233e22a2a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/07e53c7f875b4a75ac97436195de9649.png
[59ef5ffad5e64879b98a4f28c5026193.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/82eca0950a6e4ad8b65dbb5a2837a88f.png