【小程序】构建新闻列表Demo

构建新闻列表Demo（上）

目录如下

初始效果（未加CSS）

代码如下

  <view>
    <view>
          <image src="/images/avatar/1.png"></image>
          <text>Sep 8 2020</text>
    </view>
    <text>云澈、萧澈</text>
    <image src="/images/post/crab.png"></image>
    <text>怎么回事……难道我还没有死？我明明坠下了绝云崖，怎么可能还活着！而且身上居然没有痛感……连不适感都没有？这是怎么回事？</text>
    <view>
          <image src="../../images/icon/chat.png"></image>
          <text>96</text>
          <image src="../../images/icon/view.png"></image>
          <text>112</text>
    </view>
  </view>

构建新闻列表Demo（下）

当前效果（添加CSS后）

代码如下

  <view class="post-container">
    <view class="post-author-date">
          <image src="/images/avatar/1.png" class="post-author"></image>
          <text class="post-date">Sep 8 2020</text>
    </view>
    <text class="post-title">云澈、萧澈</text>
    <image src="/images/post/crab.png" class="post-image"></image>
    <text class="post-content">怎么回事……难道我还没有死？我明明坠下了绝云崖，怎么可能还活着！而且身上居然没有痛感……连不适感都没有？这是怎么回事？</text>
    <view class="post-like">
          <image src="../../images/icon/chat.png" class="post-like-image"></image>
          <text class="post-like-font">96</text>
          <image class="post-like-image" src="../../images/icon/view.png"></image>
          <text class="post-like-font">112</text>
    </view>
  </view>

.post-container {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom:  40rpx;
  background-color: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding-bottom: 10rpx;
}

.post-author-date {
  margin: 10rpx 0 20rpx 10rpx;
  /* 水平垂直居中 */
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-author {
  height: 60rpx;
  width: 60rpx;
  /* vertical-align: middle; */ /* 垂直居中 */
}

.post-date {
  margin-left: 20rpx;
  /* vertical-align: middle; */ /* 垂直居中 */
}

.post-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-left: 10px;
  margin-bottom: 10px;
}

.post-image {
  width: 100%;
  height: 340rpx;
  margin-bottom: 15px;
}

.post-content {
  font-size: 28rpx;
  color: #666;
  letter-spacing: 2; /* 增加或减少字符间的空白（字符间距） */
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}

.post-like {
  font-size: 26rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-like-image {
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}

.post-like-font {
  margin-right: 40rpx;
}