Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "Mini Program list lazy loading how to achieve", the content is detailed, the steps are clear, and the details are handled properly. I hope this "Mini Program list lazy loading how to achieve" article can help you solve your doubts. The following follows the editor's ideas slowly in depth, together to learn new knowledge.

The list on Mini Program loads lazily.

Long list We often come across why long lists need to be lazily loaded, because once there is more rendering content, the rendering engine needs more time to render the picture, and then the page may appear white screen, stutter and so on. In fact, users only need to see the content in the window, and do not need to render all the content at once, so it can be achieved through lazy loading.

Paged loading

The common list lazy loading is implemented with the back end, that is, paging loading. The front end requests the data of which page, and the back end returns the data of which page. The interaction of the front end is to request the data of the next page when the user slides to the bottom of the page.

Listening with scroll events

Height diagram

Listen for the scroll event, and the event callback will have the scrolling distance scrollTop of the current element. When scrollTop+screenHeight is equal to the scrolling height scrollHeight, it indicates that it has slid to the bottom.

In Mini Program, the Page object provides onReachBottomapi

OnReachBottom: execute function () {/ / when the page hits the bottom} and listen with IntersectionObserver

Using scrolling monitoring will consume a lot of performance, and callbacks will be triggered frequently when scrolling, so it will be calculated and judged constantly. A better optimization scheme is IntersectionObserverAPI. When the IntersectionObserver listening element intersects with the visual area, a callback will be generated, thus reducing the frequency of trigger.

Page ({onLoad: function () {wx.createIntersectionObserver (). RelativeToViewport ({bottom: 100}) .observe ('.target-class', (res) = > {res.intersectionRatio / / the proportion of the intersecting area to the layout area of the target node If it is not equal to 0, it represents the left boundary coordinate of the intersecting res.intersectionRect / / intersecting region res.intersectionRect.left / / the upper boundary coordinate of the intersecting area res.intersectionRect.top / / the width of the intersecting area res.intersectionRect.width / / the height of the intersecting area})}) Front-end paging rendering

What is mentioned above is the paging loading of the front end combined with the interface. If the interface has no paging, it directly returns a huge list of data. If the front end directly setData all the data, it will render for a long time, in fact, the complex list rendering 20 items is already very slow. At this time, the obtained data needs to be paged and rendered in batches.

As you can see from the right panel, all the nodes are not rendered at first, and the nodes continue to increase during the sliding process of the page.

Go directly to the code

{{item.name}}

GoodsList is a two-dimensional array that is doubly traversed with wx:for

/ / pages/first/index.jsconst list = Array.from ({length: 5}, (item, index) = > {return Array.from ({length: Math.ceil (Math.random () * 10 + 5)}, (subItem, subIndex) = > {return {name: `screen ${index+1}, screen ${subIndex+1} `)}) / * * the generated list is a two-dimensional array [[{}, {}], [{}, {}], [{}] {}],...] * * / Page ({data: {goodsList: [], lazyloadIdx: 0}, onLoad () {this.setData ({goodsList: [list [0]], lazyloadIdx: 1})}, / / add data onReachBottom () {console.log ('onReachBottom') to goodsList when sliding to the bottom Let {lazyloadIdx} = this.data if (lazyloadIdx > = list.length) return this.setData ({[`goodsList [${lazyloadIdx}] `]: list [lazyloadIdx], lazyloadIdx: lazyloadIdx+1})})

SetData one screen of data at a time, which not only reduces the amount of setData data, but also reduces the rendering time

Replace onReachBottom with IntersectionObserver

There are many scenarios where onReachBottom is not available, so we can only use IntersectionObserver instead. Optimize the above code

# pages/second/index.wxml {{item.name}} +

Add nodes to monitor

/ / pages/second/index.jslet lazyloadOb = nullPage ({data: {goodsList: [], lazyloadIdx: 0}, onLoad () {this.setData ({goodsList: [list [0]], lazyloadIdx: 1}) this.initObserver ()}, onunload () {this.disconnenct ()}, lazyloadNext () {console.log ('lazyloadNext') Let {lazyloadIdx} = this.data if (lazyloadIdx > = list.length) return this.setData ({[`goodsList [${lazyloadIdx}] `]: list [lazyloadIdx], lazyloadIdx: lazyloadIdx+1})}, initObserver () {lazyloadOb = wx.createIntersectionObserver (). RelativeToViewport ({bottom: 50}). Observe ('# observer', (res) = > {console.log ('res.intersectionRatio', res.intersectionRatio)) / / when the callback is triggered, load the next screen if (res.intersectionRatio) this.lazyloadNext ()}, disconnenct () {lazyloadOb.disconnenct ()}}) plus demand!

The list of items returned from the backend is only an one-dimensional array, which needs to be converted to a two-dimensional array at the front end, and now the list length for each screen is 5.

Assuming that the number of items in the list is 21, the corresponding subitem length of the two-dimensional array will be generated:

/ / pseudo code [5, 5, 5, 5, 1]

We can set the page size pageSize to 5, the current page pageNum, and then list.slice (pageNum, pageSize) can intercept the corresponding data and add it to the two-dimensional array.

But products come to increase demand. By default, the product list only shows unsold items + one sold-out item, and the rest of sold-out items need to be displayed by clicking the [View more] button.

Suppose there are 16 unsold items, 11 sold out, and the list length of each screen is still 5, then:

[5, 5, 5, / / unsold 2, / / unsold + sold out 5, 5 / / sold out]

Only two of them are not suitable for another screen, so when it is less than 5, merge directly with the previous one.

[5, 5, 7, / / unsold + one sold out 5, 5 / / sold out]

At this time, it is impossible to set pageSize, so it is necessary to calculate the length array and the corresponding two-dimensional array according to the number of sold-out, the number of unsold and the length of one screen.

/ * @ desc generates a list of items * the display list contains sold-out items, and a sold-out item is spliced at the end of the non-sold list. Click * * @ param {number} onSaleLen unsold length * @ param {number} soldOutLen sold-out length * @ returns {{subSize: Array SoldOutLen: number}} * / genSubListSize (onSaleLen, soldOutLen) {/ / when sold out, put a sold-out item to the unsold side if (soldOutLen) {soldOutLen-= 1 onSaleLen+=1} const arr = [] const lazyloadListPartLength = 5 / / 5 let firstSize = 0 if (onSaleLen)

< lazyloadListPartLength*2) { firstSize = onSaleLen onSaleLen = 0 } else { firstSize = lazyloadListPartLength onSaleLen -= lazyloadListPartLength } arr.push(firstSize) // 子项长度 const size = lazyloadListPartLength const remainder = onSaleLen % size arr.push( ...Array.from({length: Math.floor(onSaleLen/size) - 1}, () =>

Size),) if (onSaleLen) {arr.push (onSaleLen size), soldOutLen {return {name: `th ${index+1} `, soldOut: index

< 12 ? false : true}})Page({ // ... onLoad() { this.initObserver() this.handleGoodsList() }, handleGoodsList () { const { onSaleLen, soldOutLen } = this.countSaleLen() console.log('onSaleLen', onSaleLen, 'soldOutLen', soldOutLen); const { subSize, soldOutLen: soldOutLength, soldOutIndex } = this.genSubListSize(onSaleLen, soldOutLen) const renderList = this.genRenderList(subSize) console.log('renderList', renderList); }, countSaleLen () { const soldOutIndex = goodsList.findIndex(good =>

Good.soldOut) if (soldOutIndex = =-1) {return {onSaleLen: goodsList.length, soldOutLen: 0}} return {onSaleLen: soldOutIndex, soldOutLen: goodsList.length-soldOutIndex}} / / generate rendering list genRenderList (subSize) {const before = goodsList const after = [] let subList = [] / 2D array subitem let subLen = 0 / / subitem length let splitSizeArrIdx = 0 / / length array index for (let I = 0) I < before.length; iTunes +) {if (subLen = subSize [splitSizeArrIdx]) {splitSizeArrIdx++ after.push (subList) subList = [] subLen = 0} before [I] ['part'] = `th ${splitSizeArrIdx+1} screen `subList.push (before[ I]) subLen++} / / the last subitem is added to after.push (subList) return after}})

Print the renderList and get the data of dynamic segmentation.

List grouping

Run, demo.

Of course, the demand is constantly changing, and it may not be sold out or unsold next time, but it will remain the same, no matter how to divide it. After setting the array length of each item, you can generate a rendered renderList. So the lazily loaded logic can be extracted and encapsulated.

After reading this, the article "how to achieve lazy loading of Mini Program list" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.