recycle-view

The small program length list component

Using this component relies on the small program base library version 2.2.2, as well as on the npm build of the developer tool. Details can be found in the official npm documentation.

Background

At present, small programs will have a lot of application scenarios will use infinite long list of interaction, when a page displays a lot of information, will cause small program pages of Caton and white screen. There are several reasons for this:

1. The list data is large and the first setData takes a lot of time
2. The rendered list DOM structure is so large that each setData needs to create a new virtual tree, and the old tree diff operation takes a lot of time
3. The rendered list DOM has a large structure and takes up a high amount of memory, resulting in a greater probability that the page will be reclaimed by the system.

Therefore, there is a long list assembly to solve these problems.

Implementation

The core idea is that only the data displayed on the screen is rendering that the basic implementation is to listen to the Scroll event, and recalculate the data that needs to be rendered, and the data that needs to be rendered will leave an empty DIV placeholder element.

Suppose list data has 100 items, knows the position of the scrolling, how do you know which items must be displayed on the page?Because Item has not been rendered, you cannot get every Item's location through DOM operations such as getComputeStyle, so you can't know which Item needs to be rendered.In order to solve this problem, each ITEM is required to be fixed.Item's wide definition See the parameter Itemsize of the CreateRecycleContext () of the API below.

During the scroll, the data is renovated, and the DIV placeholder height before and after the current data is required, and it means in the same rendering cycle.The page rendering is triggered by SetData. The list data and DIV seating height are setDATA in 2 components. In order to put these 2 setData in the same rendering cycle, use a Hack method, so define the RECYCLE-VIEW BATCHThe property is fixed to batch = "{{BatchsetRecyCLEDATA}}".

In the scrolling process, in order to avoid frequent white screens, the contents of the two screens of the current screen will be rendered.

Package structure

Long list components consist of 2 custom components Recycle-View, Recycle-Item, and a set of APIs, the corresponding code structure is as follows

├── miniprogram-recycle-view/
    └── recycle-view 组件
    └── recycle-item 组件
    └── index.js

The package structure is described in detail below:

Instructions:

Installation component

npm install --save miniprogram-recycle-view

2. Add the configuration of the Recycle-View and Recycle-Item custom components in the JSON profile of the page.

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

3. Reference RecyCle-View in WXML file

<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
  <view slot="before">长列表前面的内容</view>
  <recycle-item wx:for="{{recycleList}}" wx:key="id">
    <view>
        <image style='width:80px;height:80px;float:left;' src="{{item.image_url}}"></image>
      {{item.idx+1}}. {{item.title}}
    </view>
  </recycle-item>
  <view slot="after">长列表后面的内容</view>
</recycle-view>

The properties of recycle-view are described below:

Recycle-view contains 3 slots, as follows:

The contents of the long list are actually in a scroll-view scroll area, and when the contents of the long list are more than just a separate list, for example, there is a copyright declaration at the bottom of our page, so we can put the contents of this section in the two slots before and after.

The introduction to recycle-item is as follows:

It is important to note that the wx:for list loop must be defined in recycle-item, not by setting the variables of the wx:for binding through setData, but by creating the RecycleContext object through the creativeRecycleContext method to manage the data, which is defined in the index.js file. It is recommended that you set wx:key at the same time to improve the rendering performance of the list.

4. Page JS manages recycle-view data

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
        }
    }
})

The page must be defined by the Component constructor, and after the introduction of the miniprogram-recycle-view package, the contentRecyContext object is created under the wx object to manage the data defined by the recycle-view, and the createRecycleContext receives parameters of 1 Object. Each key of the Object parameter is described below:

The RecycleContext object provides methods such as:

Where itemSize is used

ItemSize can be an Object that contains s width, height, and all data has only one wide-height message. If there are multiple, you can provide a function that the long list component calls to generate the width information for each data, as follows:

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

Tips:

1. The value of the recycle-view set batch property must be the value of the "batchSetRecycleData".
2. The width of the recycle-item must be the same as the width set by the itemSize, otherwise a beating bug will appear.
3. The height of the recycle-view setting must be the same as the style set in its style.
4. CreateRecycleContext (options) id parameters must be consistent with the id properties of recycle-view, dataKey parameters must be consistent with the wx:for binding variable name of recycle-item.
5. You can't use the wx:for index variable as an index value in item._index_ the recycle-item.
6. Do not set the wx:for variable value of recycle-item via setData, and it is recommended that the wx:key property be set by recycle-item.
7. If the long list contains pictures, you must ensure that the picture resources are cached by HTTP, otherwise many picture requests will be made during scrolling.
8. Some data may not necessarily be rendered, and may fail when using wx.createSelectorQuery, which can be replaced with RecycleContext's getBoundingClientRect.
9. When the useInPage parameter is used, the onPageScroll event must be defined within page.
10. TransformRpx is rounded, so transformRpx (20) and transformRpx (90) are not necessarily equal to transformRpx (110)
11. If a page has more than one long list, the patch-key property must be set more, and the values of each patch-key and the variables of the patch property must be inconsistent. For example

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