# uni

uni"/>

# uni

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

效果图：

 思路：

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

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

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

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

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

一、导航栏：

（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: ',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>