微信小程序长列表组件recycle-view的用法（scroll-view组件不适用于加载大量分页数据，加载到几十页的时候会出现白屏）

背景

使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
目前小程序会有不少的应用场景里会用到无限长列表的交互，当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。因此就有长列表组件来解决这些问题。

1. 安装组件

npm install --save miniprogram-recycle-view

2. 在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置

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

3. WXML 文件中引用 recycle-view

  长列表前面的内容
  
    
        
      {
    {item.idx+1}}. {
    {item.title}}
    
  
  长列表后面的内容


//标签对的height需要设置，否则滑动到最后可能部分数据无法显示

4.页面 JS 管理 recycle-view 的数据

const createRecycleContext = require('miniprogram-recycle-view');
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750 / W;
const code_w1 = 690 / rate;     //把每个列表的宽高转为px单位
const code_h1 = 120 / rate;


Page({
    data: {
    page_index: 1,    //当前页码
    lodeing:true,
    height_g:0
  },
  
 onLoad: function (options) {
  let that=this;
// 转换列表高度为px,用于设置上面标签对的高度
    wx.getSystemInfo({
      success(res) {
        console.log(res.windowHeight)
        let height = 608 / rate
        that.setData({
          height_g: res.windowHeight-height
        })
      }
    })
  },

 getRankingList: function () {
    var that = this;
    //防止重复加载
    if (!that.data.lodeing) {
      return false;      
    }
    that.setData({
      lodeing: false     
    })
      wx.showLoading({
        title: '加载中...',
      })

    if (that.data.page_is_end) {
      wx.hideLoading()
      wx.showToast({
        title: '加载完毕',
      });
      return false;
    }

    wx.request({
      url: api.getRankingListBytype,
      dataType: 'json',
      data: {
        
        offset: that.data.page_index,//当前页码
        time: ''
      },
      success: function (res) {
        if (res.data.code == 200) {
          wx.hideLoading()
          //根据页码做排重
          if (res.data.data.page_index + 1 == that.data.page_index) {
            return false;
          }
            ctx = createRecycleContext({
              id: 'recycleId',              //对应wxml中设置的id
              dataKey: 'recycleList',           //wxml中wx:for的值
              page: that,
              itemSize: { 
                width: code_w1,      //上面转换后的宽和高
                height: code_h1
              }
            })
            ctx.append(res.data.data.ranking_list)      //赋值

          that.setData({
            page_index: that.data.page_index + 1,         //页码+1
            page_is_end: res.data.data.ranking_list.length < res.data.data.page_size ? true : false,   //判断返回的数据总数是否小于设置的每页总数量的值，如果小于的话说明后面每页数据了，可以停止加载了
            lodeing: true    //赋值完成后设置为true，说明可以加载下一页了
          })
        }else{
          wx.showModal({
            title: '提示',
            content: res.data.message,
            showCancel: false
          })
          wx.hideLoading()
        }
      },
      complete: function (res) {

      }
    });
  },
})