小程序 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}}" id="recycleId">
  <mp-cells ext-class="recycle-cells">
    <recycle-item style="display:block" 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)
  },
});