小程序 使用recycleview实现列表

参考地址：https://www.jianshu.com/p/ac91f9f2c517

 

上一遍中已经写了一种列表的实现
查看地址：https://www.jianshu.com/p/44b07a86c8ff。

本实例我们使用recycleview控件来实现。

效果图如下：

 

 

 

列表效果图

这个实例和上一个大同小异，说一下特殊之处。

1、我们在github上下载小程序实例，地址：https://github.com/wechat-miniprogram/miniprogram-demo，把将下载下来的miniprogram_npm文件夹复制到根目录下。

2、在小程序页面对应的.json文件中加上如下代码，

"usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }

3、在小程序页面对应的.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标签下的内容和之前是一样的，用于显示列表的item。不同就是用recycle-view和recycle-item，包起来了。且recycle view的数据绑定，batch属性值必须设置为{{batchSetRecycleData}}才能生效。

4、在小程序页面对应的.wxss文件这个就不说了，基本一样。

5、在小程序页面对应的.js文件加入逻辑代码，当然也是很重要的。改动如下：
改动一：引入miniprogram-recycle-view

const createRecycleContext = require('miniprogram-recycle-view')

改动二：数据是在onReady中添加的：

onReady() {
    const ctx = createRecycleContext({
      id: 'recycleId',
      dataKey: 'recycleList',
      page: this,
      itemSize: {
        height: 70,
        width: 375
      }
    })
    ctx.append(newList)
  },