I believe you should have encountered such a scene in the development of the product image browsing, sometimes the image browsing will be very large, sometimes hundreds or thousands of pictures, so that the swiper needs a lot of swiper-items, so that the rendering will be very performance consumption, rendering will have a long period of blank time, Sometimes it will cause stalling, and the experience is very poor. Here is my solution.

The first is the WXML structure:

Js:

Using the current property, only 3 swiper-items will be placed in swiper. The images to be displayed will be placed in the second swiper, and the first and third swiper-items will be placed in the loaded animation background, as follows:

  1. Store the requested data into an array picListAll. There is no need for setData, just define a variable outside of data to reduce rendering performance.
  2. Assign the image path to display to picUrl;
  3. When switching, obtain the current attribute according to bindchange. When current changes, judge the index of the current picture in picListAll, get the picture according to index and assign it to picUrl.

The main implementation steps are the above three steps, which are relatively simple. It should be noted that when switching to the first and last pictures, you should make a judgment, remove the loding animation, and pass in the index parameter to display different pictures when requesting, which is convenient to locate the picture when clicking on the picture from the previous page to enter this page. In this example I mock my own data, just to show, if you have a server you can make hundreds of them to see the effect and compare the difference between rendering directly and rendering in the above way. Of course, this is only my solution, if you have a better solution welcome to discuss together, progress together.

Full code: github.com/HaveYuan/sw…