小程序项目之四文章列表

  • 2018-04-17
  • 113
  • 0
  • 0

上接suwiper 轮播图
在轮播图下方设置文章列表
效果就是图中黄色框框的样式;
将这个新闻列表看做一个整体view, 然后把其他的小控件看做子view,放置在大的view上面;

  1. 创建整体view


    设置css样式表
    .post-container {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    /* margin-bottom: 40rpx; /
    /
    background-color: white; /
    /
    border-bottom: 1px solid #ededed; /
    /
    border-top: 1px soli #ededed; */
    padding-bottom: 5px;
    }

  2. 设置第一行内容,头像和日期




    css:样式表
    .post-author-data {
    margin: 10rpx 0 20rpx 10rpx;
    }
    .post-author {
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
    }

  3. 设置文章列表图片



    <text class='post-title'>两好三坏</text>
    <image class='post-image' src='../images/a.png' ></image>
    <text >爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.</text>
    



    .post-image {
    margin-left: 16px;
    width: 100%;
    height: 300rpx;
    margin: auto 0;
    margin-bottom: 15px;
    }
    .post-content {
    color: #666;
    font-size: 26px;
    margin-bottom: 20px;
    margin-top: 20px;
    letter-spacing: 2rpx;
    line-height: 40rpx;
    }

  4. 设置列表底部 点击和评论


    <text class='post-title'>两好三坏</text>
    <image class='post-image' src='../images/a.png' ></image>
    <text >爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.爱情,两好三坏.</text>
    <view class='post-like'>
      <image class='post-like-images' src='../images/chat.png'></image>
      <text class='post-like-font'>92</text>
      <image class='post-like-images' src='../images/chat1.png'></image>
      <text class='post-like-font'>66</text>
    </view>
    



    .post-like {
    font-size: 13px;
    display: flex;
    flex-direction: row;
    line-height: 16px;
    margin-left: 10px;
    margin-top: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #A4968E;
    }
    .post-like-images {
    height: 16px;
    width: 16px;
    margin-bottom: 1px;
    margin-right: 8px;
    margin-left: 6px;
    vertical-align: middle;
    }
    .post.like-font{
    margin-left: 6px;
    vertical-align: middle;
    margin-right: 20px;
    }

做界面布局的时候一定要从整体去考虑布局效果, 不然写的css会很乱;

评论

还没有任何评论,你来说两句吧

你必须 登录 才能发表评论.