从零开始写一个记账小程序2

接着上一篇

打开项目，打开index.wxml，今天先把上面的账单记录区简单实现下，目标是下面这样的

首先把下面这一行

<text>账单记录区</text>

换成

<scroll-view class="billItems">
 <view class="billItem">
 <image class="avatar" src="../../images/info.png"></image>
 <view class="content">
 <text>这里显示记账内容</text>
 </view>
 </view>
</scroll-view>

可以看到又新用上了两个组件

<scroll-view></scroll-view>

和

<image></image>

首先说下<scroll-view></scroll-view>

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。

这是一个用来放很多东西，通过上下或者左右滑动来进行浏览的组件，我们的账单肯定有很多条，所以正好可以用到。

现在还没添加样式，先运行下看看

矮油，不错哦

当然我们不能满足于此，把该有的样式加上再看看

下面是index.wxss新增内容

.billItems{
 height: 100%;
 display: flex;
 flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.billItem{
 width: 100%;
 display: flex;
 justify-content: flex-start;
 align-items: flex-end;
 margin-top: 24rpx;
}
.billItem .avatar{ 
 align-self: flex-start;
 width: 64rpx;
 height: 64rpx;
 border-radius: 50%;
}
.billItem .content{
 padding: 2px 6px;
 margin-left: 40rpx;
 margin-right: 40rpx;
 word-wrap: break-word;
 max-width: 61.8%;
 border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 border-radius: 6px;
}

.billItems中的flex-direction: column是让scroll-view中的内容按纵向一个一个添加；.avatar中设定了宽高并定义border-radius: 50%是为了用一个正圆展示头像；.content设置了max-width: 61.8%是限制展示内容的最大宽度，word-wrap: break-word保证了超过最大宽度时内容会自动换行，border-bottom: 1px solid rgba(0, 0, 0, 0.4)和border-radius: 6px用来显示一个带弯角的底部边框，像个托盘一样，运行一下看看效果

这里只有一条数据，没法展示scroll-view的滚动效果，让我们再多加十几条，增加方法如下

复制完了吗？好的，可以删掉了。

冷静，我这是要说一个酷炫狂拽吊炸天的方法，没错，是循环

打开被我们冷落两集的index.js，在data下增加一个billItems

data: {
 billItems:[]
}

用来表示我们的账单列表，然后在onLoad里添加下面内容

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
 let temp = []
 while(temp.length<15){
	 temp.push('这里显示记账内容')
 }
 temp.push('这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的内容')
 this.setData({
 billItems:temp
 })
}

这里面新建了一个数组temp，准备用来填充数据，然后再一个while循环里填充15条内容，接着又加了一条很长的内容，最后调用setData方法来将我们创建的数组赋值给刚刚在data下增加的billItems

再回到熟悉的index.wxml文件做些改造

<scroll-view class="billItems">
 <view wx:for="{{billItems}}" class="billItem">
 <image class="avatar" src="../../images/info.png"></image>
 <view class="content">
 <text>{{item}}</text>
 </view>
 </view>
</scroll-view>

首先是在class="billItem"的view中加上wx:for="{{billItems}}"（记住要用双大括号对{{}}引用index.wxml中data下的数据），表示对于billItems中的每一项，都创建一套一样的该标签中的内容，也就是

<view class="billItem">
 <image class="avatar" src="../../images/info.png"></image>
 <view class="content">
 <text>{{item}}</text>
 </view>
</view>

对于循环的每一项，用item来表示，我们将其放在text标签下，编译下看看效果

怎么样，是不是比复制粘贴快，要一千条都信手拈来。现在的内容还不能滚动，因为我们还少加一点东西

scroll-x和scroll-y是用来控制scroll-view能够横向还是纵向滚动，不加就不能滚动，这里我们需要纵向，所以给scroll-view加上scroll-y就行了

<scroll-view scroll-y class="billItems">

再试试看，现在能滚动了吧

不过看着所有记录都在一边怪难受的，我们在index.wxss里再加一个样式

.mine {
 flex-direction: row-reverse;
}

拥有该样式的组件将在水平方向上以相反的方式呈现

然后在index.wxml里修改下class="billItem"的view

<view wx:for="{{billItems}}" class="billItem {{index%2==0?'mine':''}}">

其中index是表示for循环的计数，偶数时加上一个样式mine，奇数就不加，再运行一下试试

看起来如何？