小程序：详情页面的开发

作者日期栏

WXML代码

<!--pages/post-detail/post-detail.wxml-->
<view class="container">
      <image class="head-image" src="/images/bestplayers.png"></image>
      <view class="author-date">
          <image class="avatar"src="/images/avatar/2.png"></image>
          <text class="author">7七月</text>
          <text class="const-text">发表于</text>
          <text class="date">16小时前</text>
      </view>
      <text>LPL夏季赛最佳阵容</text>      
      <view>
          <image src="/images/icon/share.png"></image>
          <image src="/images/icon/collection.png"></image>
      </view>
      <text>8月9号，LPL常规赛收官之战结束，在事</text>
</view>

WXSS代码

/* pages/post-detail/post-detail.wxss */
.container{
  display:flex;
  flex-direction:column;
}

.head-image{
  width: 100%;
  height: 460rpx;
}
.author-date{
  display:flex;
  flex-direction: row;
  align-items:center;
  margin-top: 20rpx;
  margin-left: 30rpx;
}
.avatar{
  width:64rpx;
  height:64rpx;
}
.author{
  font-size:30rpx;
  font-weight:300;
  margin-left:20rpx;
  color:#666;
}

.const-text{
  font-size:24rpx;
  color:#999;
  margin-left:20rpx;
}
.date{
  font-size:24rpx;
  margin-left: 30rpx;
  color:#999;
}

• display:flex; 设置flex布局
• flex-direction: row;设置横排列
• align-items:center;设置flex布局内的元素垂直居中

效果图

文章标题栏

初始版

用一个极细的盒子 来模拟横线。

WXML代码

<text class="title">LPL夏季赛最佳阵容</text>      
      <view>
          <image class="circle-img" src="/images/icon/share.png"></image>
          <image class="circle-img" src="/images/icon/collection.png"></image>
          <view class="horizon"></view>
      </view> 

WXSS代码

.title {
  margin-left: 40rpx;
  font-size:36rpx;
  font-weight:700;
  margin-top:30rpx;
  letter-spacing:2px;
  color:#4b556c;
}

.circle-img{
  width:90rpx;
  height:90rpx;
}
.horizon{
  width:660rpx;
  height:1px;
  background-color:#e5e5e5;
}

改进版

将两个图像 用一个view容器装起来，

设置横线postision:absolute脱离文档流

设置tool组件 垂直居中 justify-content:center;

WXML代码

<view class="tool">
         <view class="circle">
            <image class="circle-img" src="/images/icon/share.png"></image>
            <image class="circle-img" src="/images/icon/collection.png"></image>
         </view>
          <view class="horizon"></view>
      </view>

WXSS代码

.tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.horizon{
  width:660rpx;
  height:1px;
  background-color:#e5e5e5;
  position: absolute;
}

效果图