第五次尝试

1.首页布局

<!--index.wxml-->

<view class="container news-list">
  <view class="navi">
    <button class="add-button" size="mini" type="primary" bindtap="addItem">添加收支</button>
  </view>
  <block wx:for="{{items}}">
    <view class="news-item" data-title="{{item.title}}">
      <view class="news-text">
        <text class="news-title">{{item.title}}</text>
        <view class="news-stamp">
          <text>{{item.cate}} {{item.account}}</text>
          <text>2016-9-29{{item.date}}</text>
        </view>
      </view>
    </view>
  </block>
</view>

2.首页样式

/**index.wxss**/

/*添加按钮*/
.navi {
  width:100%;
}

.add-button {
  float: right;
}

/*列表*/
.news-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.news-item {
  display: flex;
  flex-direction: row;
  text-align: left;
  width: 100%;
}

.news-text {
  display: flex;
  flex-direction: column;
  width:100%;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
}

.news-stamp {
    font-size: 30rpx;
    color:darkgray;
    margin: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

.news-title {
  margin: 20rpx;
  margin-bottom: 0rpx;
  font-size: 40rpx;
}

第五次尝试

原文：https://www.cnblogs.com/muailiulan/p/10424421.html