第五次尝试-CSDN博客

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; }