腾讯微信小程序 recycle-view 的用法示例

示例含下拉刷新，上拉加载

{
  "navigationBarTitleText": "列表",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "list": "miniprogram-recycle-view/recycle-view",
    "item": "miniprogram-recycle-view/recycle-item"
  }
}

<list batch="{{batchSetRecycleData}}" id="recycleId">
	<view slot="before">
        <view>这里可以放个搜索条</view>
    </view>
	<item wx:for="{{recycleList}}" wx:key="id" class="item">
        <view>{{item.title}}</view>
	</item>
  <view slot="after">
    <view>{{loadingText || '上拉加载'}}</view>
  </view>
</list>

// list.js
Page({
    name: 'recycleListPage', // 编辑某项后需要通过这个标记更新列表中对应的项
    data: {
        loadingText: '加载中',
    },
    variables: {
        pager: {
            page: 0,
            size: 10,
            hasMore: true // 是否已全部显示完
        }
    },
    onLoad: function () {
        let self = this;
        self.ctx = createRecycleContext({
            id: 'recycleId', // 对应 Html 中 list 组件的 id
            dataKey: 'recycleList', // wx:for 绑的数据
            page: this,
            itemSize: function(item, index) {
                // 这个 itemSize 只是给 JS 计算滚动用的，CSS 那要再写一次并且保持数值一致
                // JS 不会自动从 CSS 那读也不会给 HTML 设置这里的 width 和 height
                // 每个 item 的高度可以不一样
                let rs = {
                    width: this.transformRpx(750),
                    height: 120,
                };
                return rs;
            },
            useInPage: true,
            root: getCurrentPages()[getCurrentPages().length - 1],
        });
        self.refresh();
    },
    refresh: function () {
        let self = this;
        self.ctx.splice(0,  self.ctx.comp.sizeArray.length);
        self.variables.pager.page = 0; // loadData 时会 ++
        self.variables.pager.hasMore = true;
        self.loadData();
    },
  // 更新列表中的某项
  update: function (data = {}, type = 'update') {
    let self = this;
    let idx = self.data.recycleList.findIndex(v => { // 待更新项在页面上 recycle-list 里的索引
      return data.id && v.id === data.id;
    });
    // 去除空值的属性
    for (const key in data) {
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        const element = data[key];
        if (element == null) {
          delete data[key];
        }
      }
    }
    if (idx !== -1) {
      if ('update' == type) {
        self.ctx.update(idx, [{
          ...self.data.recycleList[idx],
          ...data
        }]);
      } else if ('delete' == type) {
        self.ctx.splice(idx, 1);
      }
    } else {
      console.error('列表里找不到待更新项：', idx, data, self.data.recycleList.map(v => v.id));
    }
  },
    onPullDownRefresh: function () {
        let self = this;
        self.refresh();
    },
    onReachBottom: function () {
        let self = this;
        if (self.variables.pager.hasMore) {
            this.loadData();
        }
    },
    // 这个 scroll 空着就行 recycle-view 要求必须有
    onPageScroll(e) {},
    loadData(params = {}) {
        let self = this;
        self.variables.pager.page++;
        let data = {
            page: self.variables.pager.page,
            pageSize: self.variables.pager.size,
        };
        wx.showLoading();
        wx.request({
            url: 'api/articles',
            header: {
                'Content-Type': 'application/json; charset=UTF-8',
                'Authorization': 'Bearer xxxxxxxxxxxxxxxxxxxx',
            },
            data,
            success: (res) => {
                let recycleList = res && res.response && res.response.data || [];
                if (!recycleList.length) {
                    self.variables.pager.hasMore = false;
                }
                recycleList = recycleList.map(v => {
                    return {
                        id: v.ID,
                        title: v.Name,
                    };
                });
                self.ctx.append(recycleList);

                let data = {};
                let loadingText = self.data.loadingText;
                if (res && res.response && res.response.dataCount && !recycleList.length && res.response.dataCount > 0) {
                    loadingText = '没有了';
                }
                if (res && res.response && res.response.dataCount && res.response.dataCount === 0) {
                    loadingText = '暂无数据';
                }
                data.loadingText = loadingText;
                self.setData(data);
            },
            complete: function() {
                wx.hideLoading();
            }
        });
    },
});

.item {
  width: 100%;
  height: 120px;
}

// app.js
App({
    getListPage: function () {
      let pages = getCurrentPages();
      let listPage = null;
      for (let i = pages.length - 1; i >= 0; i--) {
        const page = pages[i];
        if ('recycleListPage' == page.name) {
          listPage = pages[i];
          break;
        }
      }
      return listPage;
    },
})

// edit.js
var app = getApp();
Page({
  // 编辑某项后同步更新列表
  submit: function() {
    let data = {} // 更新后的数据
    api.update(data).then(res => {
        if (res.success) {
          // 同步更新到资产列表
          let listPage = app.getListPage();
          listPage && listPage.update(asset, 'update');

        }
    });
  }
})