小程序 recycle-view 个人demo

本demo使用了组件 具体到小程序组件文档查阅

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

{
    "recycle-view": "/miniprogram_npm/miniprogram-recycle-view/recycle-view",
    "recycle-item": "/miniprogram_npm/miniprogram-recycle-view/recycle-item",
    "mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells",
    "mp-cell": "/miniprogram_npm/weui-miniprogram/cell/cell",
}

写这个的目的是因为小程序的文档它没有demo，于是只好自己整一个来方便大家了！

如对您有帮助请点个赞吧！

list.wxml

<recycle-view batch="{{batchSetRecycleData}}" width="{{width}}" height="{{height}}" >
  <mp-cells ext-class="recycle-cells">
    <recycle-item  wx:for="{{recycleList}}" wx:key="k" wx:for-index="k" wx:for-item="v">
      <mp-cell>
        <view slot="icon" class="tag">{{v.status}}</view>
        <view class="name">{{v.name}}</view>
        <view slot="footer" class="value">{{v.value}}</view>
      </mp-cell>
    </recycle-item>
  </mp-cells>
</recycle-view>

list.wxss

.tag {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  width: 40px;
  height: 40px;
  font-size: 12px;
  background: #33a34f;
}
.name {
  padding: 0 10px;
  font-size: 14px;
}
.value {
  font-size: 14px;
}
.recycle-cells .weui-cell {
  padding: 5px 10px;
}

list.js

//获取应用实例
const createRecycleContext = require("miniprogram-recycle-view");
const app = getApp();
/**
 * 注意：recycle-view 不是通过setData() 渲染的，
 * 需要独立使用createRecycleContext 方法创建的对象
 * 使用 append，splice，update，destory 进行列表数据的操作
 */
Page({
  data: {
    height: 456,
    width: 100,
  },
  ctx: undefined,
  onLoad: function () {
    let height = app.globalData.system.windowHeight;
    let width = app.globalData.system.windowWidth;
    this.ctx = createRecycleContext({
      id: "recycleId", //设置 RecycleContext id
      dataKey: "recycleList", //设置渲染列表的名称
      page: this,
      itemSize: {
        // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
        width: width, //单个item的宽度
        height: 50, //单个item 的高度，必须设置准确，原因见实现原理
      },
    });
    this.setData({ height: height, width: width });
    this.getList();
  },
  getList() {
    let arr = [];
    for (let i = 0; i < 100; i++) {
      arr.push({
        sid: i,
        name: "监控点" + i,
        value: (i % 10) + "℃",
        status: "在线",
      });
    }
    //将数据append到列表
    this.ctx.append(arr)
  },
});