【wx小程序】扩展组件recycle-view的使用

一、components文件夹中，加入对应的组件包

二、页面配置

1、json：“usingComponents”: {}

"recycle-view": "/components/miniprogram-recycle-view/recycle-view",
"recycle-item": "/components/miniprogram-recycle-view/recycle-item"

2、js:

// 必须使用相对路径表示，否则会报错
const createRecycleContext = require('../../../components/miniprogram-recycle-view/index.js')
const imgUrlList = [
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSFrhQolODuh9lGqFKoicqKGxweRdS2zzibxicBMYkTic4WCJrbBNqoMchCWf02UbOvMBI6d32TAKFuqTQ/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T0MfAGwtAs4jz0vTC0PHJEv2UErsjBhNDNujSwLhy7icf0DjDe7BYSIFkwqpMbekcwKDBic0ygBoFtw/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGrMuuicv6QLQAe74FH1KrGUOq8VMe3Ya63tiaqaMNQibvB4T3SLoEWV3WrMvlySd3NXRXJGG75LAtjA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9Zolu6XnibTXNaZ1c19RozKjLqmR4oWl3DZhpLcDzwmtMOmIOuNuricrNA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9ZhibT6gPEoZfiaRGy9w9QyWB2vtOkxYUJPcEjePQTrVYpRF0PqicC4EEvw/0?wx_fmt=jpeg'
]

// 单位转换：
const rpx2px = (rpx) => (rpx / 750) * wx.getSystemInfoSync().windowWidth
const px2rpx = (px) => (px / wx.getSystemInfoSync().windowWidth) * 750

Page({
    
    
  data: {
    
    
    rheight:0,
    rwidth:0,
    urls5: [
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-1.jpg?sign=ff17b6597c5659186d54469e6122d153&t=1590025404',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434',
      'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441'
    ],
  },
  ,
  onLoad() {
    
    
    //构造
    const ctx = createRecycleContext({
    
    
      id: 'recycleId',//对应 recycle-view 的 id 属性的值
      dataKey: 'recycleList',//对应 recycle-item 的 wx:for 属性设置的绑定变量名
      page: this,//recycle-view 所在的页面或者组件的实例，页面或者组件内可以直接传 this
      itemSize: /*{此参数用来生成recycle-item的宽和高，前面提到过，要知道当前需要渲染哪些item，必须知道item的宽高才能进行计算
        Object必须包含{width, height}两个属性，Function的话接收item, index这2个参数，返回一个包含{width, height}的Object
        itemSize如果是函数，函数里面this指向RecycleContext
        如果样式使用了rpx，可以通过transformRpx来转化为px。
        为Object类型的时候，还有另外一种用法，详细情况见下面的itemSize章节的介绍。*/
        // recycle-item的宽高必须和itemSize设置的宽高一致，否则会出现跳动的bug。
        // height: rpx2px(600),
        // width: rpx2px(750)
        this.itemSizeFunc//使用函数的方式设置每个item的宽高
      // }
      
    })
    /*
    1、append	——list, callback	在当前的长列表数据上追加list数据，callback是渲染完成的回调函数
    2、splice	——begin, count, list, callback	插入/删除长列表数据，参数同Array的splice函数，callback是渲染完成的回调函数
    3、update	——begin, list, callback	更新长列表的数据，从索引参数begin开始，更新为参数list，参数callback同splice。
    4、destroy	——无	销毁RecycleContext对象，在recycle-view销毁的时候调用此方法
    5、forceUpdate	——callback, reinitSlot	重新渲染recycle-view。callback是渲染完成的回调函数，当before和after这2个slot的高度发生变化时候调用此函数，reinitSlot设置为true。当item的宽高发生变化的时候也需要调用此方法。
    6、getBoundingClientRect	——index	获取某个数据项的在长列表中的位置，返回{left, top, width, height}的Object。
    7、getScrollTop	——无	获取长列表的当前的滚动位置。
    8、transformRpx	——rpx	将rpx转化为px，返回转化后的px整数。itemSize返回的宽高单位是px，可以在这里调用此函数将rpx转化为px，参数是Number，例如ctx.transformRpx(140)，返回70。注意，transformRpx会进行四舍五入，所以transformRpx(20) + transformRpx(90)不一定等于transformRpx(110)
    9、getViewportItems	——inViewportPx	获取在视窗内的数据项，用于判断某个项是否出现在视窗内。用于曝光数据上报，菜品和类别的联动效果实现。参数inViewportPx表示距离屏幕多少像素为出现在屏幕内，可以为负值。
    10、getList	——无	获取到完整的数据列表*/ 
    ctx.append(urls5)//需要便利的数组
  },

//自定义每个item的宽高...
  itemSizeFunc: function (item, index) {
    
    
    // console.log("item:",item)
    return {
    
    
      height: rpx2px(600),
      width: rpx2px(750)
    }
  }，


	//扩展内容：获取屏幕高度（单位转化为rpx）
	this.setData({
    
    
      rheight:px2rpx(wx.getSystemInfoSync().windowWidth)*wx.getSystemInfoSync().windowHeight/wx.getSystemInfoSync().windowWidth,
      rwidth: px2rpx(wx.getSystemInfoSync().windowWidth),

      logs: (wx.getStorageSync('logs') || []).map(log => {
    
    
        return {
    
    
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
    console.log("h====="+this.data.rheight+","+this.data.rwidth)
})

3、wxml:

<recycle-view batch="{
     
     {batchSetRecycleData}}" id="recycleId" hidden="{
     
     {hide0}}">
          <!-- 循环渲染： -->
          <recycle-item wx:for="{
     
     {recycleList}}" wx:key="id" class="item">
            	每个子项的view写在这。。。
          </recycle-item>
          <!-- <view slot="after" style="text-align: center">最下面的标题</view> -->
</recycle-view>