微信小程序扩展组件小程序长列表组件(2)-木庄网络博客

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

const createRecycleContext = require('miniprogram-recycle-view')
Page({
    onReady: function() {
        var ctx = createRecycleContext({
          id: 'recycleId',
          dataKey: 'recycleList',
          page: this,
          itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
            width: 162,
            height: 182
          }
        })
        ctx.append(newList)
        // ctx.update(beginIndex, list)
        // ctx.destroy()
    },
    itemSizeFunc: function (item, idx) {
        return {
            width: 162,
            height: 182
        }
    }
})

页面必须通过 Component 构造器定义，页面引入了miniprogram-recycle-view包之后，会在 wx 对象下面新增接口createRecycleContext函数创建RecycleContext对象来管理 recycle-view 定义的的数据，createRecycleContext接收类型为1个 Object 的参数，Object 参数的每一个 key 的介绍如下：

参数名	类型	描述
id	String	对应 recycle-view 的 id 属性的值
dataKey	String	对应 recycle-item 的 wx:for 属性设置的绑定变量名
page	Page/Component	recycle-view 所在的页面或者组件的实例，页面或者组件内可以直接传 this
itemSize	Object/Function	此参数用来生成recycle-item的宽和高，前面提到过，要知道当前需要渲染哪些item，必须知道item的宽高才能进行计算 Object必须包含{width, height}两个属性，Function的话接收item, index这2个参数，返回一个包含{width, height}的Object itemSize如果是函数，函数里面`this`指向RecycleContext 如果样式使用了rpx，可以通过transformRpx来转化为px。为Object类型的时候，还有另外一种用法，详细情况见下面的itemSize章节的介绍。
useInPage	Boolean	是否整个页面只有recycle-view。Page的定义里面必须至少加空的onPageScroll函数，主要是用在页面级别的长列表，并且需要用到onPullDownRefresh的效果。切必须设置`root`参数为当前页面对象
root	Page	当前页面对象，可以通过getCurrentPages获取, 当useInPage为true必须提供

RecycleContext 对象提供的方法有：

方法	参数	说明
append	list, callback	在当前的长列表数据上追加list数据，callback是渲染完成的回调函数
splice	begin, count, list, callback	插入/删除长列表数据，参数同Array的splice函数，callback是渲染完成的回调函数
update	begin, list, callback	更新长列表的数据，从索引参数begin开始，更新为参数list，参数callback同splice。
destroy	无	销毁RecycleContext对象，在recycle-view销毁的时候调用此方法
forceUpdate	callback, reinitSlot	重新渲染recycle-view。callback是渲染完成的回调函数，当before和after这2个slot的高度发生变化时候调用此函数，reinitSlot设置为true。当item的宽高发生变化的时候也需要调用此方法。
getBoundingClientRect	index	获取某个数据项的在长列表中的位置，返回{left, top, width, height}的Object。
getScrollTop	无	获取长列表的当前的滚动位置。
transformRpx	rpx	将rpx转化为px，返回转化后的px整数。itemSize返回的宽高单位是px，可以在这里调用此函数将rpx转化为px，参数是Number，例如ctx.transformRpx(140)，返回70。注意，transformRpx会进行四舍五入，所以transformRpx(20) + transformRpx(90)不一定等于transformRpx(110)
getViewportItems	inViewportPx	获取在视窗内的数据项，用于判断某个项是否出现在视窗内。用于曝光数据上报，菜品和类别的联动效果实现。参数inViewportPx表示距离屏幕多少像素为出现在屏幕内，可以为负值。

其中 itemSize 的使用

itemSize可以为包含{width, height}的Object，所有数据只有一种宽高信息。如果有多种，则可以提供一个函数，长列表组件会调用这个函数生成每条数据的宽高信息，如下所示：

function(item, index) {
    return {
        width: 195,
        height: item.azFirst ? 130 : 120
    }
}

提示：

recycle-view设置batch属性的值必须为{{batchSetRecycleData}}。
recycle-item的宽高必须和itemSize设置的宽高一致，否则会出现跳动的bug。
recycle-view设置的高度必须和其style里面设置的样式一致。
createRecycleContext(options)的id参数必须和recycle-view的id属性一致，dataKey参数必须和recycle-item的wx:for绑定的变量名一致。
不能在recycle-item里面使用wx:for的index变量作为索引值的，请使用{{item._index_}}替代。
不要通过setData设置recycle-item的wx:for的变量值，建议recycle-item设置wx:key属性。
如果长列表里面包含图片，必须保证图片资源是有HTTP缓存的，否则在滚动过程中会发起很多的图片请求。
有些数据不一定会渲染出来，使用wx.createSelectorQuery的时候有可能会失效，可使用RecycleContext的getBoundingClientRect来替代。
当使用了useInPage参数的时候，必须在Page里面定义onPageScroll事件。
transformRpx会进行四舍五入，所以transformRpx(20) + transformRpx(90)不一定等于transformRpx(110)
如果一个页面有多个长列表，必须多设置batch-key属性，每个的batch-key的值和batch属性的变量必须不一致。例如

<recycle-view batch="{{batchSetRecycleData}}" batch-key="batchSetRecycleData"></recycle-view>
<recycle-view batch="{{batchSetRecycleData1}}" batch-key="batchSetRecycleData1"></recycle-view>

标签：微信小程序

返回前面的内容