# uni-app开发攻略 # 个人封面页 （透明导航栏、源码）

需求：制作一个类似于某博的个人主页的封面板块

效果图：

 思路：

拿到设计图以后，我们需要先进行拆解页面结构，

这个页面主要由三大板块组成：导航栏+背景图+用户信息

拆解完结构以后，下一步是进行细分板块，

看每一个板块里面有什么特点，会用到什么知识点

下面是每个版块的思路及知识点

一、导航栏：

（tip：这里我们采用的是uview里面的组件——u-navbar，

所以第一步是先要在page.json里面的这个页面加上"navigationStyle":"custom"）

然后我们通过看设计图，可以知道导航栏透明、没有下边框，

那我们就打开u-navbar.Vue或者组件文档，看看里面有哪个参数是有这些特征

 

注意尽量不要在这个文档里面，进行修改，因为这个是全局来的，

如果你修改的话，会影响其他页面的制作，所以我们只需要在标签里面加入这些参数就可以了

<!-- 页面顶部导航栏 -->
		<view>
			<u-navbar back-icon-name="nav-back"
                 back-icon-color="#FFFFFF" back-text="返回" 
                :background="background"
				class="navbar"
                :immersive="false"
                 :border-bottom="false">
				<view class="slot-wrap">
					<uni-icons type="search" 
                        class="headicon" 
                        size="20" color="#ffffff"> 
                     </uni-icons>
				</view>
			</u-navbar>
		</view>

二、背景图：

看设计图，可以得出效果是要让背景图铺满整一个封面

那这个时候，

我们就可以想到要使用 mode="widthFix"

（tip：widthfix:宽度不变，高度自动变化，保持原图宽高比不变）

<image class="nav-background" src="/static/mine/head/headbanner.png"
 mode="widthFix"></image>


.nav-background {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
	

三、用户信息板块：

里面一个重点是，文字都是显示在背景图上面

那就可以用到知识点：z-index

点击可以查看这个知识点的详解

再使用弹性布局进行布局就可以了

代码展示：

<template>
	<view>
		<!-- 页面顶部导航栏 -->
		<view>
			<u-navbar back-icon-name="nav-back" back-icon-color="#FFFFFF" 
			back-text="返回" :background="background"
				class="navbar" :immersive="false" :border-bottom="false">
				<view class="slot-wrap">
					<uni-icons type="search" class="headicon" size="20" color="#ffffff"></uni-icons>
				</view>
			</u-navbar>
		</view>
		<image class="nav-background" src="/static/mine/
		head/headbanner.png" mode="widthFix"></image>
		<!-- 页面封面图 -->
		<view class="head-banner">
			<!-- 用户信息栏 -->
			<view class="head-meg">
				<u-avatar :src="src" mode="circle"
				 :show-level="true" level-bg-color="#25AFA2" class="head-img">
				</u-avatar>
				<view class="head-meg-name">
					<view class="head-meg-info">
						<view class="head-meg-title">提提</view>
						<image class="head-meg-item" src="/static/mine/head/sex.png"></image>
						<image class="head-meg-item" src="/static/mine/head/grade.png"></image>
					</view>
					<view class="head-data-info">
						<view class="head-meg-data" v-for="(item,index) in headlist">
							<view class="head-meg-data-item">{{item.num}}</view>
							<view class="head-meg-data-title">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="head-garde">
				<image src="/static/mine/attestation.png"
				 mode="" class="head-garde-icon"></image>
				<view class="head-garde-title">情感专家</view>
				<view class="head-garde-title tip">用户的签名签名</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent'
				},
				src: 'https://up.enterdesk.com/edpic/2e/78/97/2e789,
				7af2087369fbbdf5d0337647489.jpg',
				headlist: [{
						num: '335345万',
						title: '粉丝'
					},
					{
						num: '46656',
						title: '关注'
					},
					{
						num: '4534亿',
						title: '转评赞'
					},
				],
				uselist: [{
						cate_name: '相册'
					},
					{
						cate_name: '文章'
					},
					{
						cate_name: '话题'
					},

				],
				current: '0',
			

			}
		},
		methods: {
			
			}
		}
	}
</script>

<style scoped lang="scss">
	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #2979ff;
		color: #fff;
		padding: 24rpx;
	}

	.album-line {
		margin-top: 10rpx;
		width: 750rpx;
		height: 15rpx;
		background-color: #ededed;
	}

	.navbar {
		opacity: 1;
		font-size: 30px;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: bold;
		text-align: left;
		color: #ffffff;

	}

	.slot-wrap {
		display: flex;
		padding: 0 30rpx;
		margin-left: auto;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */

	}

	.nav-background {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}

	.head-banner {
		margin-top: 250rpx;
		height: 160rpx;

		.head-meg {
			display: flex;
			width: 725rpx;
			padding-left: 25rpx;

			.head-meg-name {
				padding-left: 33rpx;
				z-index: 1;

				.head-meg-info {
					display: flex;
					padding-bottom: 15rpx;

					.head-meg-title {
						font-size: 32rpx;
						font-family: Microsoft YaHei, Microsoft YaHei-Regular;
						font-weight: bold;
						text-align: left;
						color: #ffffff;
						padding-right: 12rpx;
					}

					.head-meg-item {
						width: 30rpx;
						height: 30rpx;
						padding-left: 12rpx;
						padding-top: 5rpx;
					}

				}

				.head-data-info {
					display: flex;

					.head-meg-data {
						display: flex;
						padding-right: 40rpx;

						.head-meg-data-item {
							font-size: 24rpx;
							font-family: Microsoft YaHei, Microsoft YaHei-Regular;
							font-weight: 400;
							text-align: left;
							color: #ffffff;
							padding-right: 10rpx;
						}

						.head-meg-data-title {
							font-size: 24rpx;
							font-family: Microsoft YaHei, Microsoft YaHei-Regular;
							font-weight: 400;
							text-align: left;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.head-garde {
		display: flex;
		align-items: baseline;
		padding-left: 40rpx;
		padding-top: 20rpx;

		.head-garde-icon {
			width: 23rpx;
			height: 23rpx;
			padding-right: 10rpx;
		}

		.head-garde-title {
			z-index: 1;
			height: 25rpx;
			font-size: 18rpx;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
			font-weight: 400;
			color: #fffefe;
		}

		.tip {
			padding-left: 40rpx;
		}

	}

	}
</style>
<style>
	page {
		background-color: #ededed;
	}
</style>