开始

关注的公共列表。
头像是单独的一列。
image.png

image.png
话题页也会用到这个组件。
image.png
image.png
image.png

image.png
image.png

开始写这个组件

后面会单独封装成一个组件。
image.png
首先是左边的头像
image.png

  1. <!-- 列表 -->
  2.         <view class="common-list">
  3.             <view class="">
  4.                 <image src="../../static/demo/userpic/12.jpg" mode="widthFix" lazy-load="true"></image>
  5.             </view>
  6.         </view>

左边和右边的class属性
image.png

  1. <view class="common-list">
  2.             <view class="common-list-l">
  3.                 <image src="../../static/demo/userpic/12.jpg" mode="widthFix" lazy-load="true"></image>
  4.             </view>
  5.             <view class="common-list-r">
  7.             </view>
  8.         </view>

垂直方向居中，左右两边靠边
image.png
性别的图标
image.png
左边昵称 性别 和岁数。
image.png

  1. <view class="">昵称<view class="icon iconfont icon-nan">25</view>

关注图标
image.png
标题和图片
image.png

  1. <view class="">
  2.     <image src="../../static/demo/datapic/13.jpg" mode="widthFix" lazy-load="true"></image>
  3. </view>

最下面一行，也是左右的结构。flex布局，左右两边分别靠边。
image.png
3个图标分别是转发 评论，点赞。
image.png

image.png

  1. <view class="u-f-ajc u-f-jsb">
  2.                     <view class="">深圳 龙岗</view>
  3.                     <view class="">
  4.                         <view class="icon iconfont icon-zhuanfa"></view>
  5.                         <view class="icon iconfont icon-pinglun1"></view>
  6.                         <view class="icon iconfont icon-dianzan1"></view>
  7.                     </view>
  8.                 </view>

让这三个图标 flex布局，并且是水平的排列。
image.png
flex布局，垂直方向居中
image.png
image.png
最外层也是需要flex布局的
image.png
头像太大了。
image.png

image.png
头像增加宽和高。加一个圆形
image.png

  1. .common-list-l image{
  2.         width: 90upx;
  3.         height: 90upx;
  4.         border-radius: 100%;
  5.     }

image.png

如果标题很长。左边往往会被压缩。
image.png
这里没有被压缩。
image.png
为了保险起见。给左边设置防止被压缩。flex-shrink设置为0 就不会被压缩了。
image.png

  1. .common-list-l{
  2.         flex-shrink: 0;
  3.     }

组件和窗口的间距

上下左右都有间距
image.png
最外层加一个内边距
image.png

  1. .common-list{
  2.         padding: 20upx;
  3.     }

右边图片放最大化。
第三个view下面的image
image.png
image.png
image.png
昵称性别之类 不是flex布局
image.png
flex布局 并且垂直方向居中。
image.png

image.png
右边为了保险起见，加flex布局。我们要保证让他填满剩余的空间。
image.png

  1. .common-list-r{
  2.         flex: 1;
  3.     }

左边和右边增加间距
image.png
先加一个外边距 试一下。
image.png

  1. .common-list-r{
  2.         flex: 1;
  3.         margin-left: 10upx;
  4.     }

image.png

右边第一行优化

image.png

image.png

  1. .common-list-r>view:nth-child(1){
  3.     }
  4.     .common-list-r>view:nth-child(2){
  6.     }
  7.     .common-list-r>view:nth-child(3){
  9.     }
  10.     .common-list-r>view:nth-child(4){
  12.     }

吸取昵称颜色
image.png
昵称的颜色， 然后是右边的关注的背景 和边距
image.png

  1. .common-list-r>view:nth-child(1)>view:first-child{
  2.         color: #999999;
  3.     }
  4.     .common-list-r>view:nth-child(1)>view:last-child{
  5.         background: #EEEEEEE;
  6.         padding: 0 10upx;
  7.         font-size: 26upx;
  8.     }

昵称的字大一点。
image.png
年龄增加class
image.png
字体、左右边距，距离左边外边距。圆角
image.png

  1. .tag-sex{
  2.         background: #007AFF;
  3.         color: #FFFFFF;
  4.         font-size: 23upx;
  5.         padding: 0 5upx;
  6.         margin-left: 10upx;
  7.         border-radius: 20upx;
  8.     }

image.png
字体变大一点， 性别行高设置为0
image.png

  1. .tag-sex{
  2.         background: #007AFF;
  3.         color: #FFFFFF;
  4.         font-size: 23upx;
  5.         padding: 0 5upx;
  6.         margin-left: 10upx;
  7.         border-radius: 20upx;
  8.         line-height: 0;
  9.     }

内边距上下为2，左右为10
image.png

image.png
行高改成20upx
image.png

  1. .common-list-r>view:nth-child(1)>view:last-child{
  2.         background: #EEEEEEE;
  3.         padding: 0 10upx;
  4.         font-size: 26upx;
  5.     }
  6.     .tag-sex{
  7.         background: #007AFF;
  8.         color: #FFFFFF;
  9.         font-size: 23upx;
  10.         padding: 2upx 10upx;
  11.         margin-left: 10upx;
  12.         border-radius: 20upx;
  13.         line-height: 20upx;
  14.     }

image.png

image.png

  1. line-height: 24upx;

image.png

image.png

  1. .common-list-r>view:nth-child(1)>view:last-child{
  2.         background: #EEEEEEE;
  3.         padding: 0 10upx;
  4.         font-size: 32upx;
  5.     }
  6.     .tag-sex{
  7.         background: #007AFF;
  8.         color: #FFFFFF;
  9.         font-size: 23upx;
  10.         padding: 5upx 10upx;
  11.         margin-left: 10upx;
  12.         border-radius: 20upx;
  13.         line-height: 22upx;
  14.     }

image.png

第二行调解样式

首先是标题大一点。上下加一点间距
image.png

  1. .common-list-r>view:nth-child(2){
  2.         font-size: 32upx;
  3.         padding: 15upx 0;
  4.     }

image.png
改成12
image.png

  1. .common-list-r>view:nth-child(2){
  2.         font-size: 32upx;
  3.         padding: 12upx 0;
  4.     }

第四行

image.png
取色，第四行的颜色
image.png

最后一行所有图标和字体的颜色
image.png

image.png
第四行 最右边的3个图标的父元素的view
image.png

  1. .common-list-r>view:nth-child(4)>view:nth-child(2)>view{
  2.         margin-left: 10upx;
  3.         padding-left: 5upx;
  4. }

image.png

最后一行加一条线

image.png

  1. .common-list-r {
  2.         flex: 1;
  3.         margin-left: 15upx;
  4.         border-bottom: 1upx solid #EEEEEE;
  5.     }

image.png
增加间距
image.png

  1. .common-list-r {
  2.         flex: 1;
  3.         margin-left: 15upx;
  4.         border-bottom: 1upx solid #EEEEEE;
  5.         padding-bottom: 10upx;
  6.     }

image.png

本节最终代码

  1. <template>
  2.     <view>
  3.         <!-- 自定义导航栏 -->
  4.         <uni-nav-bar :statusBar="true" @clickRight="openAdd">
  5.             <!-- 左边 -->
  6.             <block slot="left">
  7.                 <view class="nav-left">
  8.                     <view class="icon iconfont icon-qiandao"></view>
  9.                 </view>
  10.             </block>
  11.             <!-- 中间 -->
  12.             <view class="nav-tab-bar u-f-ajc">
  13.                 <block v-for="(tab,index) in tabBaras" :key="tab.id">
  14.                     <view class="u-f-ajc" :class="{'active':tabIndex==index}"
  15.                     @tap="changeTab(index)">
  16.                         {{tab.name}}
  17.                         <view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view></view>
  18.                 </block>
  19.             </view>
  20.             <!-- 右边 -->
  21.             <block slot="right">
  22.                 <view class="nav-right u-f-ajc">
  23.                     <view class="icon iconfont icon-bianji1"></view>
  24.                 </view>
  25.             </block>
  26.         </uni-nav-bar>
  28.         <!-- 列表 -->
  29.         <view class="common-list u-f">
  30.             <view class="common-list-l">
  31.                 <image src="../../static/demo/userpic/12.jpg" mode="widthFix" lazy-load="true"></image>
  32.             </view>
  33.             <view class="common-list-r">
  34.                 <view class="u-f-ac u-f-jsb">
  35.                     <view class="u-f-ac">昵称
  36.                         <view class="tag-sex icon iconfont icon-nan">25</view>
  37.                     </view>
  38.                     <view class="icon iconfont icon-zengjia">关注</view>
  39.                 </view>
  40.                 <view class="">我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</view>
  41.                 <view class="">
  42.                     <image src="../../static/demo/datapic/13.jpg" mode="widthFix" lazy-load="true"></image>
  43.                 </view>
  44.                 <view class="u-f-ajc u-f-jsb">
  45.                     <view class="">深圳 龙岗</view>
  46.                     <view class="u-f-ac">
  47.                         <view class="icon iconfont icon-zhuanfa"></view>
  48.                         <view class="icon iconfont icon-pinglun1"></view>
  49.                         <view class="icon iconfont icon-dianzan1"></view>
  50.                     </view>
  51.                 </view>
  52.             </view>
  53.         </view>
  55.     </view>
  56. </template>
  58. <script>
  59.     export default {
  60.         data() {
  61.             return {
  62.                 tabIndex: 0,
  63.                 tabBaras: [
  64.                     {name:'关注',id:'guanzhu'},
  65.                     {name:'话题',id:'toppic'},
  66.                 ]
  67.             }
  68.         },
  69.         methods: {
  70.             changeTab(index) {
  71.                 this.tabIndex=index;
  72.             },
  73.             openAdd(){
  74.                 uni.navigateTo({
  75.                     url:'../add-input/add-input'
  76.                 })
  77.             }
  78.         }
  79.     }
  80. </script>
  82. <style>
  83.     .common-list{
  84.         padding: 20upx;
  85.     }
  86.     .common-list-l{
  87.         flex-shrink: 0;
  88.     }
  89.     .common-list-l image{
  90.         width: 90upx;
  91.         height: 90upx;
  92.         border-radius: 100%;
  93.     }
  94. .common-list-r {
  95.         flex: 1;
  96.         margin-left: 15upx;
  97.         border-bottom: 1upx solid #EEEEEE;
  98.         padding-bottom: 10upx;
  99.     }
  100.     .common-list-r>view:nth-child(3)>image{
  101.         width: 100%;
  102.         border-radius: 10upx;
  103.     }
  104.     .common-list-r>view:nth-child(1)>view:first-child{
  105.         color: #999999;
  106.         color: 30upx;
  107.     }
  108.     .common-list-r>view:nth-child(1)>view:last-child{
  109.         background: #EEEEEEE;
  110.         padding: 0 10upx;
  111.         font-size: 32upx;
  112.     }
  113.     .tag-sex{
  114.         background: #007AFF;
  115.         color: #FFFFFF;
  116.         font-size: 23upx;
  117.         padding: 5upx 10upx;
  118.         margin-left: 10upx;
  119.         border-radius: 20upx;
  120.         line-height: 22upx;
  121.     }
  122.     .common-list-r>view:nth-child(2){
  123.         font-size: 32upx;
  124.         padding: 12upx 0;
  125.     }
  126.     .common-list-r>view:nth-child(3){
  128.     }
  129.     .common-list-r>view:nth-child(4)>view{
  130.         color: #AAAAAA;
  131.     }
  132.     .common-list-r>view:nth-child(4)>view:nth-child(2)>view{
  133.         margin-left: 10upx;
  134.         padding-left: 5upx;
  135.         border-bottom: 1upx solid #EEEEEE;
  136.         padding-bottom: 10upx;
  137.     }
  138.     /* .nav-left,.nav-right{
  139.         border: 1upx solid;
  140.         width: 100%;
  141.     } */
  142.     .nav-left{
  143.         /* 这里视频中是左边16upx,实际这里是不需要的 */
  144.         margin-left: 0upx;
  145.     }
  146.     .nav-left>view,.nav-right>view{
  147.         font-size: 40upx;
  148.     }
  149.     .nav-left>view{
  150.         color: #FF9619;
  151.     }
  152.     .nav-tab-bar{
  153.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  154.         width: 100%;
  155.         /* border: 1upx solid; */
  156.         margin-left: -20upx;
  157.         position: relative;
  158.     }
  159.     .nav-tab-bar>view{
  160.         /* border: 1upx solid; */
  161.         font-size: 32upx;
  162.         padding: 0 15upx;
  163.         font-weight: bold;
  164.         color: #969696;
  165.     }
  166.     .active{
  167.         color: #333333!important;
  168.     }
  169.     .nav-tab-bar-line{
  170.         border-bottom: 14upx solid #FEDE33;
  171.         /* border-top: 7upx solid red; */
  172.         width: 70upx;
  173.         border-radius: 20upx;
  174.         position: absolute;
  175.         bottom: 12upx;
  176.     }
  177. </style>

结束