Why does the applet use swiper have the problem of lag?

After watching so many fools, I can't help it!! This lag may be (I think it must be, I'm afraid you spray) is caused by swiper's internal data rendering, if you are written in the following way, then please read my instructions carefully:1

Whether there is no lag when it is dead data in swier-item, 2When the swiper-item is dynamically rendered, the data under the swiper-item is stuck.

Workaround: Define an array in data: arr:

When you get the tab category, you can dynamically add an object to arr, which becomes :arr[,.Then use arr to render the swiper-item, and the content is the data inside the swiper-item.

Whenever you switch a new tab, get the tabindex (the tabindex is the value of the tab bar switch or slide to change) to find the corresponding position in arr, first check whether the content in the corresponding position is empty (whether the data has been saved, but this is not accurate when the data is empty under the tab), and put the requested data in the content of the corresponding position when it is empty, and the part ** is as follows"

content is not empty, and nothing is done. That's it!!

Reason:After doing this,swiper-item will only be rendered once,Except for the first time you need to load data when you switch tab,Other times are directly switched to the already rendered swiper-item,There will be no lag.,If you solve the problem,Just like it.,Let more people see it.。。。 A rookie, spray lightly...

Clause. 1. May not be compatible.

Clause. Second, the software is not perfect, if you have recently installed any new software, it may be this reason, uninstall it and try again.

Clause. Third, the hardware temperature is too high, this kind of notebook is common, desktop computers are also available in summer, the solution is mainly to clean up the dust, strengthen ventilation and heat dissipation.

Clause. Fourth, there's a bug in the system, Microsoft.

Fix it.

Clause. Fifth, the system is poisoned, this reason is also very common, it should be the main reason, you can be in safe mode.

Let's take a look at the antivirus.

When developing Mini Programs, we often use the swiper component to achieve the effect of carousel or page turning, but when the number of swiper-items is too large, it will cause the problem of view layer rendering lag.

Some netizens recommend that the practice is to render only three swiper-items, which are this data and the previous and next ones, by default, the current displayed swiper-item position is the middle one, and then dynamically change the three pieces of data according to the sliding, and set the current position back to the middle swiper-item, that is, current:1, But this approach will have an animation effect of sliding back when setdata(), There's also a simple and crude solution to this is by setting duration='0'Turn off the animation directly, but no matter what, the experience is relatively poor.

The practice of some netizens is to render n empty swiper-item first, n is the number of current data, and then only insert the current index and the upper and lower data, and dynamically modify the data of the corresponding position according to the sliding gift, this method is simpler than the previous one, optimizes the performance, and also solves the problem that there will be a sliding back animation when turning the page, but when the amount of swiper-item is large enough, such as 1000, the rendering will still be very stuck.

1. In the same way, only three swiper-items are rendered in the view layer, and the rest of the data is stored in the array.

2. Add the circular attribute to the swiper component so that the swiper can be connected and sliding.

3. Then the index of the current display of swiper-item in the swiper is also dynamic, and the data needs to be updated to the corresponding position according to the current index, instead of directly fixing the infiltration current in the second one, combined with the circular attribute, you can realize that only three swiper-items are rendered and slide without jumping back, and solve the problem of rendering lag caused by too many swipers.

Realistic renderings: