background

  • Wepy 1.7.3
  • wepy-redux

Long list interaction problems

wepyThe tabular performance of the framework is relatively poor, the main reason is that when modifying any field in the list, it will give
setDataPass the complete list, as detailed here
issue;

Modify any field in the long list at this time, and the page will not respond for a long time

To solve

Use a dictionary (
Object) with long lists, because dictionaries typically have much less data than lists

scenario

Arbitrary pop-up to shopping cart
cartTo modify, the purchase quantity corresponding to the product list shall be modified simultaneously 

/ / / / product list data structure length (3000 +) var products = [{id: "79", the name: "delicate meat"}...]. Var cartDict = {2407: {price: "1.02" num: 2}} var cartDict = {2407: {price: "1.02" num: 2}}

Note that since CartDict data is manually added by the user, the amount of data is much smaller than the list. So when you setData, it’s going to be faster

At this point we render the purchase of the list using a combination

<view class="num" wx:if="{{ cartDict[product.id] }}">{{cartDict[product.id].num}}</view>

Improve performance by moving the per-change list to per-change CartDict; The issue above can be used in a similar way to create a dictionary of expanded products

First loading white screen problem

Our product list is usually long (currently the maximum size is 3000+), and the blank screen takes a long time to enter the page for the first time (10s+).

To solve

Use the optimization idea of H5, similar to APP. Render only part of the on-screen products, most of the other products using skeleton display; There are some limitations to using this method

  • The product height needs to be known to calculate whether the current product is on the screen
  • Scrolling experience is not optimized, small programs are actually using this list optimization ideas, so the actual effect of fast scrolling is

hang(small program optimization) =>
skeleton(Our optimization)


=> product appears

scenario

All the products in our project are of equal height, so it is better to calculate whether the current product should be displayed.

The first is template writing

<repeat for="{{products}}" item="dish" index="index">
  <dishItem :dish="dish"
    wx:if="{{showTypeDict[type.id]}}"></dishItem>
  <view wx:else>
    <image src="{{_skeleton}}"></image>
  </view>
</repeat>

Description:

  • showTypeDictRepresents the current product dictionary that needs to be displayed. The reason for using the dictionary is based onLong list interaction problems
  • Categorize the products, compare the coordinates of the categories and show the entire category at a time
  • Dishitem is the corresponding component of the product, which is relatively complicated
  • Skeleton for the skeleton

Monitor scroll to determine the content of showTypeDict based on the current ScrollTop and product classification coordinates, and pay attention to stream blocking;

After using the above methods, the white screen time of 3000+ products is equal to that of 100+ products. There is no lag when scrolling, and it takes a while to wait for the product to render when scrolling fast.

The above