微信小程序開發入門之共享賬本（三）

微信小程序開發入門之共享賬本（三）

接著上一篇

打開項目，打開index.wxml，今天先把上面的賬單記錄區簡單實現下，目標是下面這樣的

首先把下面這一行

賬單記錄區

換成

 
 
 
 這裡顯示記賬內容
 
 

可以看到又新用上了兩個組件

和

首先說下

可滾動視圖區域。使用豎向滾動時，需要給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文件做些改造

 
 
 
 {{item}}
 
 

 

首先是在class="billItem"的view中加上wx:for="{{billItems}}"（記住要用雙大括號對{{}}引用index.wxml中data下的數據），表示對於billItems中的每一項，都創建一套一樣的該標籤中的內容，也就是

 
 
 {{item}}
 

對於循環的每一項，用item來表示，我們將其放在text標籤下，編譯下看看效果

怎麼樣，是不是比複製粘貼快，要一千條都信手拈來。現在的內容還不能滾動，因為我們還少加一點東西

scroll-x和scroll-y是用來控制scroll-view能夠橫向還是縱向滾動，不加就不能滾動，這裡我們需要縱向，所以給scroll-view加上scroll-y就行了

再試試看，現在能滾動了吧

不過看著所有記錄都在一邊怪難受的，我們在index.wxss裡再加一個樣式

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

擁有該樣式的組件將在水平方向上以相反的方式呈現

然後在index.wxml裡修改下class="billItem"的view

其中index是表示for循環的計數，偶數時加上一個樣式mine，奇數就不加，再運行一下試試

看起來如何？