开始

开头头部的组件。包括背景墙，下面是头像，第三行是昵称和 性别年龄。 第四行是关注。
image.png
最外层一个view组件，然后里面是一个背景图。在背景图的下面是view包裹的头像。

背景图的文件夹：
D:\wjw\学习中\uni-app\网易云课堂 - uni-app实战仿糗事百科app开发\糗事\课时114.个人空间头部组件开发\bgimg\

背景图和头像。
image.png

  1.     <view>
  2.         <!-- 背景图 + 用户基本信息 -->
  3.         <view class="user-space-head">
  4.             <image src="../../static/bgimg/1.jpg" mode="widthFix" lazy-load="true"></image>
  5.             <view class="user-space-head-info">
  6.                 <image src="../../static/demo/userpic/11.jpg" mode="widthFix" lazy-load="true"></image>
  7.             </view>
  8.         </view>
  9.     </view>

引入性别和年龄的组件
image.png

image.png

  1. import tagSexAge from '@/components/common/tag-sex-age.vue';
  3. components:{
  4.   tagSexAge
  5. },

昵称后面是年龄和性别。
image.png

  1. <view class="">
  2.         昵称<tag-sex-age sex="20" age="0"></tag-sex-age>
  3. </view>

image.png

  1. <view class="icon iconfont icon-zengjia">
  2.                     关注
  3.                 </view>

单独加个样式
image.png

  1. <view class="icon iconfont icon-zengjia user-space-head-btn">
  2.                     关注
  3.                 </view>

先写一些公共的间距等。上下15的外边距
image.png

  1. .user-spaace-margin{
  2.     margin: 15upx 0;
  3. }

图片肯定是全屏的。
image.png
让背景图 垂直，水平居中
image.png
水平 垂直居中，并且是column布局
image.png

  1. <!-- 背景图 + 用户基本信息 -->
  2.         <view class="user-space-head u-f-ajc">
  3.             <image src="../../static/bgimg/1.jpg" mode="widthFix" lazy-load="true"></image>
  4.             <view class="user-space-head-info u-f-ajc u-f-column">
  5.                 <image src="../../static/demo/userpic/11.jpg" mode="widthFix" lazy-load="true"></image>
  7.                 <view class="">
  8.                     昵称<tag-sex-age sex="20" age="0"></tag-sex-age>
  9.                 </view>
  10.                 <view class="icon iconfont icon-zengjia user-space-head-btn">
  11.                     关注
  12.                 </view>
  13.             </view>
  14.         </view>

image.png

  1. .user-space-head{
  2.     position: relative;
  3.     height: 500upx;
  4.     overflow: hidden;
  5. }

头像
image.png

  1. .user-space-head-info{
  2.     position: absolute;
  3.     top: 150upx;
  4. }
  5. .user-space-head-info>image{
  6.     width: 150upx;
  7.     height: 150upx;
  8.     border-radius: 100%;
  9. }

首先是给昵称加点外边距
image.png

image.png

  1. <view class="user-spaace-margin">
  2.                     昵称<tag-sex-age sex="20" age="0"></tag-sex-age>
  3.                 </view>
  4.                 <view class="icon iconfont icon-zengjia user-space-head-btn user-spaace-margin">
  5.                     关注
  6.                 </view>

昵称的样式
image.png

  1. .user-space-head-info>view:first-of-type{
  2.     color: #FFFFFF;
  3.     font-size: 35upx;
  4.     font-weight: bold;
  5.     text-shadow: 2upx 2upx 10upx #333333;
  6. }

水平居中 flex布局。这样昵称和性别的组件就会在一行上。
image.png
关注按钮
吸取黄色
image.png

边框色和背景色一致，
image.png
上下内边距为0
image.png

  1. .user-space-head-btn{
  2.     background:#FFE933;
  3.     color: #333333;
  4.     border: 1upx solid #FFE933;
  5.     padding: 0 15upx;
  6.     border-radius: 10upx;
  7. }

image.png
性别和年龄写反了
image.png

  1. <view class="user-spaace-margin u-f-ajc">
  2.                     昵称<tag-sex-age sex="0" age="20"></tag-sex-age>
  3. </view>

关注按钮有点大了。
image.png

image.png

  1. .user-space-head-btn{
  2.     background:#FFE933;
  3.     color: #333333;
  4.     border: 1upx solid #FFE933;
  5.     padding: 0 15upx;
  6.     font-size: 28upx;
  7.     border-radius: 10upx;
  8. }

image.png
已关注的状态。背景色去掉。
image.png

  1. .active{
  2.     background: none;
  3. }

image.png

  1. .active{
  2.     background: none;
  3.     color: #FFFFFF;
  4.     border: 1upx solid #FFFFFF;
  5. }

image.png
已关注，加好不应该出现。
image.png

构造data

完整的背景图 路径用计算属性来显示
image.png

  1. userinfo:{
  2.     bgimg:1
  3. }
  5. computed:{
  6.             getBgImg(){
  7.                 return '../../static/bgimg/'+this.userinfo.bgimg+'.jpg';
  8.             }
  9.         },

image.png

  1. <view class="user-space-head u-f-ajc">
  2.             <image :src="getBgImg" mode="widthFix" lazy-load="true"></image>
  3.             <view class="user-space-head-info u-f-ajc u-f-column">
  4.                 <image :src="userinfo.userpic" mode="widthFix" lazy-load="true"></image>
  6.                 <view class="user-spaace-margin u-f-ajc">
  7.                     {{userinfo.username}}<tag-sex-age sex="0" age="20"></tag-sex-age>
  8.                 </view>
  9.                 <view class="icon iconfont icon-zengjia user-space-head-btn user-spaace-margin active">
  10.                     关注
  11.                 </view>
  12.             </view>
  13.         </view>

image.png

image.png

  1. return {
  2.                 userinfo:{
  3.                     bgimg:1,
  4.                     userpic:'../../static/demo/userpic/11.jpg',
  5.                     username:'昵称',
  6.                     sex:0,
  7.                     age:20,
  8.                     isguanzhu:false
  9.                 }
  10.             }

没有关注的时候才显示加号的图标。
image.png

  1. <!-- 背景图 + 用户基本信息 -->
  2.         <view class="user-space-head u-f-ajc">
  3.             <image :src="getBgImg" mode="widthFix" lazy-load="true"></image>
  4.             <view class="user-space-head-info u-f-ajc u-f-column">
  5.                 <image :src="userinfo.userpic" mode="widthFix" lazy-load="true"></image>
  7.                 <view class="user-spaace-margin u-f-ajc">
  8.                     {{userinfo.username}}<tag-sex-age :sex="userinfo.sex" :age="userinfo.age"></tag-sex-age>
  9.                 </view>
  10.                 <view class="icon iconfont icon-zengjia user-space-head-btn user-spaace-margin active">
  11.                     {{userinfo.isguanzhu?'已关注':'关注'}}
  12.                 </view>
  13.             </view>
  14.         </view>

关注事件

取反
image.png

  1. methods: {
  2.             guanzhu(){
  3.                 this.userinfo.isguanzhu=!this.userinfo.isguanzhu;
  4.             }
  5.         }

image.png

image.png

背景墙点击事件

可以上面那种单独一行的写法。 也可以用if else的方法
image.png

image.png

image.png

赋值
image.png

  1. // 切换背景
  2.             changeBgImg(){
  3.                 let no = parseInt(this.userinfo.bgimg);
  4.                 // if(no<4){
  5.                 //     no++;
  6.                 // }else{
  7.                 //     no=1;
  8.                 // }
  9.                 this.userinfo.bgimg = no<4?++no:1;
  10.             },

添加上点击事件
image.png

  1. @tap.stop="changeBgImg"

点击背景图切换
image.png

image.png

这两个点击事件 目前是单独的还不需要阻止冒泡。
image.png
都加上冒泡的阻止事件，也不受影响
image.png

  1. <view>
  2.         <!-- 背景图 + 用户基本信息 -->
  3.         <view class="user-space-head u-f-ajc">
  4.             <image :src="getBgImg" mode="widthFix" lazy-load="true" 
  5.             @tap.stop="changeBgImg"></image>
  6.             <view class="user-space-head-info u-f-ajc u-f-column">
  7.                 <image :src="userinfo.userpic" mode="widthFix" lazy-load="true"></image>
  9.                 <view class="user-spaace-margin u-f-ajc">
  10.                     {{userinfo.username}}<tag-sex-age :sex="userinfo.sex" :age="userinfo.age"></tag-sex-age>
  11.                 </view>
  12.                     <view class="icon iconfont user-space-head-btn user-space-margin" 
  13.                     :class="[userinfo.isguanzhu?'active':'icon-zengjia']" @tap.stop="guanzhu">
  14.                     {{userinfo.isguanzhu?'已关注':'关注'}}
  15.                     </view>
  16.             </view>
  17.         </view>
  18.     </view>

封装组件

image.png

image.png

整块html内容和css剪切到组件内

这个是全局的css可以不用剪切过去。
image.png

image.png

  1. <style scoped>
  2.     .user-space-head{
  3.         position: relative;
  4.         height: 500upx;
  5.         overflow: hidden;
  6.     }
  8.     .user-space-head>image{
  9.         width: 100%;
  10.     }
  11.     .user-space-head-info{
  12.         position: absolute;
  13.         top: 150upx;
  14.     }
  15.     .user-space-head-info>image{
  16.         width: 150upx;
  17.         height: 150upx;
  18.         border-radius: 100%;
  19.     }
  20.     /* 昵称 */
  21.     .user-space-head-info>view:first-of-type{
  22.         color: #FFFFFF;
  23.         font-size: 35upx;
  24.         font-weight: bold;
  25.         text-shadow: 2upx 2upx 10upx #333333;
  26.     }
  27.     .user-space-head-btn{
  28.         background:#FFE933;
  29.         color: #333333;
  30.         border: 1upx solid #FFE933;
  31.         padding: 0 15upx;
  32.         font-size: 28upx;
  33.         border-radius: 10upx;
  34.     }
  35.     .active{
  36.         background: none;
  37.         color: #FFFFFF;
  38.         border: 1upx solid #FFFFFF;
  39.     }
  40. </style>

image.png
因为不能直接修改传递过来的属性值，所以用一个值去接收 ，再修改。
image.png

image.png

image.png

把事件都复制过来
image.png

image.png
主要这里的isguanzhu。就是调用自己组件内部的了。并不是userInfo对象的内的属性值。
image.png

引入的子组件一块复制进来。
image.png

使用组件

image.png

  1.     <user-space-head :userinfo="userinfo"></user-space-head>
  5. import userSpaceHead from '@/components/user-space/user-space-head.vue';
  9. components:{
  10.             userSpaceHead
  11.         },

image.png

本节代码

user-space-head组件

  1. <template>
  2.     <view class="user-space-head u-f-ajc">
  3.         <image :src="getBgImg" mode="widthFix" lazy-load="true" 
  4.         @tap.stop="changeBgImg"></image>
  5.         <view class="user-space-head-info u-f-ajc u-f-column">
  6.             <image :src="userinfo.userpic" mode="widthFix" lazy-load="true"></image>
  8.             <view class="user-spaace-margin u-f-ajc">
  9.                 {{userinfo.username}}<tag-sex-age :sex="userinfo.sex" :age="userinfo.age"></tag-sex-age>
  10.             </view>
  11.                 <view class="icon iconfont user-space-head-btn user-space-margin" 
  12.                 :class="[isguanzhu?'active':'icon-zengjia']" @tap.stop="guanzhu">
  13.                 {{isguanzhu?'已关注':'关注'}}
  14.                 </view>
  15.         </view>
  16.     </view>
  17. </template>
  19. <script>
  20.     import tagSexAge from '@/components/common/tag-sex-age.vue';
  21.     export default{
  22.         components:{
  23.             tagSexAge
  24.         },
  25.         props:{
  26.             userinfo: Object
  27.         },
  28.         data(){
  29.             return {
  30.                 isguanzhu: this.userinfo.isguanzhu
  31.             }
  32.         },
  33.         computed:{
  34.             getBgImg(){
  35.                 return '../../static/bgimg/'+this.userinfo.bgimg+'.jpg';
  36.             }
  37.         },
  38.         methods: {
  39.             // 切换背景
  40.             changeBgImg(){
  41.                 let no = parseInt(this.userinfo.bgimg);
  42.                 // if(no<4){
  43.                 //     no++;
  44.                 // }else{
  45.                 //     no=1;
  46.                 // }
  47.                 this.userinfo.bgimg = no<4?++no:1;
  48.             },
  49.             // 关注事件
  50.             guanzhu(){
  51.                 this.isguanzhu=!this.isguanzhu;
  52.             }
  53.         }
  54.     }
  55. </script>
  57. <style scoped>
  58.     .user-space-head{
  59.         position: relative;
  60.         height: 500upx;
  61.         overflow: hidden;
  62.     }
  64.     .user-space-head>image{
  65.         width: 100%;
  66.     }
  67.     .user-space-head-info{
  68.         position: absolute;
  69.         top: 150upx;
  70.     }
  71.     .user-space-head-info>image{
  72.         width: 150upx;
  73.         height: 150upx;
  74.         border-radius: 100%;
  75.     }
  76.     /* 昵称 */
  77.     .user-space-head-info>view:first-of-type{
  78.         color: #FFFFFF;
  79.         font-size: 35upx;
  80.         font-weight: bold;
  81.         text-shadow: 2upx 2upx 10upx #333333;
  82.     }
  83.     .user-space-head-btn{
  84.         background:#FFE933;
  85.         color: #333333;
  86.         border: 1upx solid #FFE933;
  87.         padding: 0 15upx;
  88.         font-size: 28upx;
  89.         border-radius: 10upx;
  90.     }
  91.     .active{
  92.         background: none;
  93.         color: #FFFFFF;
  94.         border: 1upx solid #FFFFFF;
  95.     }
  96. </style>

user-space页面

  1. <template>
  2.     <view>
  3.         <!-- 背景图 + 用户基本信息 -->
  4.         <user-space-head :userinfo="userinfo"></user-space-head>
  5.     </view>
  6. </template>
  8. <script>
  9.     import userSpaceHead from '@/components/user-space/user-space-head.vue';
  11.     export default {
  12.         components:{
  13.             userSpaceHead
  14.         },
  15.         data() {
  16.             return {
  17.                 userinfo:{
  18.                     bgimg:1,
  19.                     userpic:'../../static/demo/userpic/11.jpg',
  20.                     username:'昵称',
  21.                     sex:0,
  22.                     age:20,
  23.                     isguanzhu:false
  24.                 }
  25.             }
  26.         },
  28.         methods: {
  30.         }
  31.     }
  32. </script>
  34. <style>
  35. .user-spaace-margin{
  36.     margin: 15upx 0;
  37. }
  39. </style>

结束