开始

先来写这个组件
image.png
分为4行内容
image.png

第一行

第一行分为左右两边，左边是头像
image.png
头像参考官方文档
https://uniapp.dcloud.io/component/image.html
image.png

image.png
输入uim会提示
image.png
选择uImage
image.png
这里准备好的一些图片素材。
image.png
正常情况下mode如果不设置的话，图片会被压缩
image.png
这样不会被压缩和拉伸。
image.png
lazy-load不需要传任何参数。
image.png
头像后面跟着昵称
image.png

  1. <view class="index-list1">
  2.             <view>
  3.                 <image src="../../static/demo/userpic/12.jpg" 
  4.                 mode="widthFix" lazy-load></image>
  5.             </view>
  6.             <view>
  8.             </view>
  9.         </view>

右侧

image.png
右键检查元素
image.png

image.png

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

image.png

第2、3行

2行直接是文字。
第三行还是图片，
image.png

  1. <view class="index-list2">我是标题</view>
  2.         <view class="index-list3">
  3.             <image src="../../static/demo/userpic/11.jpg" mode="widthFix" lazy-load></image>
  4. </view>

image的模式有13种
image.png
一般都是应前面4种
image.png
加上懒加载。
image.png

第四行

image.png

也是分为左右两边
image.png

image.png
评论的图标
image.png
转发
image.png

image.png

  1. <view class="index-list4">
  2.             <view class="">
  3.                 <view class=""><view class="icon iconfont icon-icon_xiaolian-mian"></view>10</view>
  4.                 <view class=""><view class="icon iconfont icon-kulian"></view>10</view>
  5.             </view>
  6.             <view class="">
  7.                 <view class=""><view class="icon iconfont icon-pinglun1"></view>10</view>
  8.                 <view class=""><view class="icon iconfont icon-zhuanfa"></view>10</view>
  9.             </view>
  10.         </view>

运行测试效果。
image.png

css

最外层的，然后里面有1234
image.png

  1. .index-list{
  3.     }
  4.     .index-list1{
  6.     }
  7.     .index-list2{
  9.     }
  10.     .index-list3{
  12.     }
  13.     .index-list4{
  15.     }

和旁边都是有边距的，增加一个外边距
image.png
最下面有1条横线
image.png
上下左右的间距，和底部的边框
image.png

  1. .index-list{
  2.         padding: 20upx;
  3.         border-bottom: 1upx solid;
  4.     }

输入flex搜索，官方也封装了flex布局。
image.png
这里我们就自己写，先不用官方封装好的了。
第一行是flex布局。水平方向排列，又分为左右两边。
image.png
水平方向，左右两个靠边。
image.png

垂直方向居中。
image.png

  1. .index-list1{
  2.         display: flex;
  3.         justify-content: space-between;
  4.         align-items: center;
  5.     }

最后一行也是同样的布局方式
image.png
我们把1的样式复制到4这里即可，
image.png
image.png
最后一行现在是左右两边的布局了
image.png
头像的宽高。
里面分为两个view
image.png

  1. .index-list1>view:first-child{
  3.     }
  4.     .index-list1>view:last-child{
  6.     }

头像也是flex布局，水平居中即可，
image.png

关注和加号，也必须是水平方向的，也是flex布局。和上面一样。
image.png
最后一行的原理也是一样的。都是flex布局，然后都居中显示。
image.png

  1. .index-list4>view:first-child{
  2.         display: flex;
  3.         align-items: center;
  4.     }
  5.     .index-list4>view:last-child{
  6.         display: flex;
  7.         align-items: center;
  8.     }

头像。先给90upx
image.png

  1. .index-list1>view:first-child image {
  2.         width: 90upx;
  3.         height: 90upx;
  4.     }

image.png
底部的两个必须要水平方向。view下面的view
image.png

  1. .index-list4>view>view{
  2.         display: flex;
  3.         align-items: center;
  4.     }

中间的图片没有占满全部
image.png
3下面的image.图片宽度设置为100%，然后加上圆角
image.png

  1. .index-list3>image{
  2.         width: 100%;
  3.         border-radius: 20upx;
  4.     }

头像圆角。纯圆的，就设置为100%
image.png

  1. .index-list1>view:first-child image {
  2.         width: 90upx;
  3.         height: 90upx;
  4.         border-radius: 100%;
  5.     }

image.png
根据参考图，调整一下，
image.png
头像和昵称之间有间距，
image.png

  1. .index-list1>view:first-child image {
  2.         width: 90upx;
  3.         height: 90upx;
  4.         border-radius: 100%;
  5.         margin-right: 10upx;
  6.     }

昵称的字体颜色，用吸色器，吸取一下。
image.png

image.png

  1. .index-list1>view:first-child{
  2.         display: flex;
  3.         align-items: center;
  4.         color: #999999;
  5.     }

关注按钮的样式

image.png
有背景色，加上一点点的圆角。
image.png

  1. .index-list1>view:last-child{
  2.         display: flex;
  3.         align-items: center;
  4.         background: #929292;
  5.         border-radius: 5upx;
  6.     }

标题和上下都有间距
image.png

image.png

  1. .index-list2{
  2.         padding-top: 15upx;
  3.     }
  4.     .index-list3{
  5.         padding-top: 15upx;
  6.     }

最后一行和上面也是有间距
image.png

image.png
第四行 图标的颜色

image.png
第四行下面所有的view的 字体颜色
image.png

  1. .index-list4 view{
  2.         color: #999999;
  3.     }

image.png
关注按钮颜色 重新吸取
image.png

image.png

  1. .index-list1>view:last-child{
  2.         display: flex;
  3.         align-items: center;
  4.         background: #F4F4F4;
  5.         border-radius: 5upx;
  6.     }

image.png

第四行所有的图标，都加上右间距。三层view
image.png

  1. .index-list4>view>view>view{
  2.         margin-left: 15upx;
  3.     }

image.png
数字后面的间距，就是第一个view和第二个view之间的间距
image.png
先把这个改成10
image.png
image.png

  1. .index-list4>view>view>view{
  2.         margin-right: 10upx;
  3.     }
  4.     .index-list4>view>view:first-child{
  5.         margin-right: 10upx;
  6.     }

image.png

最下面的线

取色器 取颜色
image.png

image.png
关注的按钮，左右两边没有间距了。
这俩先和到一起。
image.png
合起来，下面的删除。
image.png
上下为0 左右为10upx
image.png

  1. .index-list1>view:last-child{
  2.         display: flex;
  3.         align-items: center;
  4.         background: #F4F4F4;
  5.         border-radius: 5upx;
  6.         padding: 0 10upx;
  7.     }

image.png
这个先删除
image.png

文章标题的文字
image.png

  1. .index-list2{
  2.         padding-top: 15upx;
  3.         font-size: 32upx;
  4.     }

image.png

优化代码

有太多的display为flex 和 align-items为center。这些都可以封装起来。
image.png
用u-f取代display为flex
image.png
align-items也是很重复。
image.png

image.png

image.png

image.png

image.png

image.png

  1. .u-f,.u-f-ac,.u-f-ajc{
  2.         display: flex;
  3.     }
  4.     .u-f-ac,.u-f-ajc{
  5.         align-items: center;
  6.     }
  7.     .u-f-ajc{
  8.         justify-content: center;
  9.     }

替换flex样式

开始替换。比如这里原来是用的flex布局
image.png
第一行和第三行都删除
image.png
删除后
image.png
用u-f-ac。它既是flex布局 还是居中。
image.png

image.png

  1. <view class="index-list1 u-f-ac">

image.png
删除后
image.png

第一行的左边
image.png
第一行的右边
image.png
删除后
image.png
第一行的右边也是这样的
image.png

第四行的左边和右边
image.png

image.png

第四行
image.png

删除后
image.png
image.png

  1. <view class="index-list4 u-f-ac">

image.png
也就是第四行view下面的view
image.png

  1. <view class="index-list4 u-f-ac">
  2.             <view class="u-f-ac">
  3.                 <view class="u-f-ac"><view class="icon iconfont icon-icon_xiaolian-mian"></view>10</view>
  4.                 <view class="u-f-ac"><view class="icon iconfont icon-kulian"></view>10</view>
  5.             </view>
  6.             <view class="u-f-ac">
  7.                 <view class="u-f-ac"><view class="icon iconfont icon-pinglun1"></view>10</view>
  8.                 <view class="u-f-ac"><view class="icon iconfont icon-zhuanfa"></view>10</view>
  9.             </view>
  10.         </view>

image.png
头像大小再改下
image.png

  1. .index-list1>view:first-child image {
  2.         width: 95upx;
  3.         height: 90upx;
  4.         border-radius: 100%;
  5.         margin-right: 10upx;
  6.     }

封装左右两边靠边

image.png

image.png

  1. .u-f-jsb{
  2.         justify-content: space-between;
  3. }

image.png
image.png

  1. <view class="index-list1 u-f-ac u-f-jsb">

删
image.png

  1. <view class="index-list4 u-f-ac u-f-jsb">

image.png
image.png

都是margin-right
image.png
用逗号合并到一行里面
image.png

  1. .index-list4>view>view>view,.index-list4>view>view:first-child{
  2.         margin-right: 10upx;
  3.     }

image.png

公共css封装

image.png
新建common.css
image.png

  1. .u-f,.u-f-ac,.u-f-ajc{
  2.     display: flex;
  3. }
  4. .u-f-ac,.u-f-ajc{
  5.     align-items: center;
  6. }
  7. .u-f-ajc{
  8.     justify-content: center;
  9. }
  10. .u-f-jsb{
  11.     justify-content: space-between;
  12. }

App.vue内引入公共样式
image.png 

  1. /* 公共样式 */
  2.     @import './common/common.css';

image.png

结束