View lazy loading in applet

Preface

When writing small programs , There is a page that shows a lot of content , Pop up window city 6 individual , There are a lot of lists , therefore wxml There are many nodes , More than the applet suggests 1000 Below nodes .

This lazy load sample project code has been placed in github and Code cloud On

problem

This page with a lot of content is the first page of subcontracting , Before that, the development tools can run normally , So I didn't care about it . But last Saturday （2020 year 1 month 16 Japan ） after , There is a problem with the development tools ！！！ Enter the subcontracting page , The view takes half a day to render , But the event will be executed immediately （ The conclusion drawn from the click event and interface request ）. Since the code has not changed compared with the previous day , And the phone is normal , So I doubted whether there was something wrong with the development tools at the first time , So I deleted the tool , And downloaded it again twice （ The latest stable version , The latest pre release version ）, But it still doesn't work , Still this page of subcontracting , It can't be rendered . after , Open the performance monitoring panel of the mobile phone , I found that the value of rendering time is flashing all the time , But always stay in 0ms, It is certain that there is something wrong with the rendering of the applet . I also suspect that there are problems with the subcontracting page , Other subcontracting pages are found , No problem . then , Think about the experience score before , It has already prompted wxml Too many nodes , I annotated some code tentatively . good heavens , The development tools are normal immediately . Before identifying the problem , I didn't think about my code at the first time , Because after one day, the development tools will not run , This is really strange .

Optimize the code

First rendering , You don't need to render everything , So you can do lazy loading , Render when displayed , adopt wx:if To control whether .

Pass the test , The experience score after lazy loading is higher than that without lazy loading . Here are two contrast pictures ：

Lazy loading is not used

Lazy loading is used

Project address ：

github Address

Code cloud address

Lazy loading principle

Small program passed setData Later data , And then put in wxml Will be rendered , But we can do this by setting wx:if Give Way , Node not displayed , You won't render . When the scroll hits the bottom , Through one more Tag value To judge the subsequent rendering .

In this example, the following view is rendered only after touching the bottom , When you click the category on the left , Also do rendering .

such as ： Initially, only the first set of data is rendered , When I clicked the fourth category , The second one , Third , The data of the fourth one is displayed . This is also through this Tag value To judge .

Sketch Map ：