上一遍中已經(jīng)寫了一種列表的實現(xiàn)
查看地址：http://www.reibang.com/p/44b07a86c8ff包归。
本實例我們使用recycleview控件來實現(xiàn)。
效果圖如下：
列表效果圖
這個實例和上一個大同小異，說一下特殊之處瞻润。
1褐筛、我們在github上下載小程序?qū)嵗阴澹刂罚?a target="_blank">https://github.com/wechat-miniprogram/miniprogram-demo菠发，把將下載下來的miniprogram_npm文件夾復(fù)制到根目錄下艺蝴。
2惋鸥、在小程序頁面對應(yīng)的.json文件中加上如下代碼杂穷，
"usingComponents": {
"recycle-view": "miniprogram-recycle-view/recycle-view",
"recycle-item": "miniprogram-recycle-view/recycle-item"
}
3、在小程序頁面對應(yīng)的.wxml文件卦绣，添加如下布局代碼耐量。
<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
<recycle-item wx:for="{{recycleList}}" wx:key="index" class="item">
<view class="row" id="{{index}}" bindtap="itemtap">
<view class="content">
<view class="top">
<view class="nickname">{{item.nickname}}</view>
<view class="sentence">{{item.last_content}}</view>
</view>
</view>
<view class="imgview">
<image class="img" mode="aspectFit" src="{{item.head_img_url}}" />
</view>
</view>
</recycle-item>
</recycle-view>
文件中的第一個view標簽下的內(nèi)容和之前是一樣的，用于顯示列表的item滤港。不同就是用recycle-view和recycle-item廊蜒，包起來了。且recycle view的數(shù)據(jù)綁定溅漾，batch屬性值必須設(shè)置為{{batchSetRecycleData}}才能生效劲藐。
4、在小程序頁面對應(yīng)的.wxss文件這個就不說了樟凄，基本一樣聘芜。
5、在小程序頁面對應(yīng)的.js文件加入邏輯代碼缝龄，當然也是很重要的汰现。改動如下：
改動一：引入miniprogram-recycle-view
const createRecycleContext = require('miniprogram-recycle-view')
改動二：數(shù)據(jù)是在onReady中添加的：
onReady() {
const ctx = createRecycleContext({
id: 'recycleId',
dataKey: 'recycleList',
page: this,
itemSize: {
height: rpx2px(300),
width: rpx2px(750)
}
})
ctx.append(newList)
},
此實例相對好理解挂谍，到這里就結(jié)束了，隨筆記錄瞎饲，不喜勿噴口叙。
