Phenomenon of the problem

The page loads 100 pieces of data at a time, and the page slides to a standstill.

The problem code

<template> <div class="container"> <div class="nav"> <text class="nav-item">list</text> </div> <! -- List --> <list class="list" onclick="listClick" onlongpress="listLongPress" onscrollbottom="scrollbottom" id="list" scrollpage="{{scrollPage}}"> <list-item type="listItem" class="item" onclick="listItemClick" if="{{listData.length>0}}">  <div for="{{listData}}" style="flex-direction:column;" > <text class="txt">{{$item}}--{{$idx}}</text> </div> </list-item> <! -- Loading More --> <list-item type="loadMore" class="load-more" if="{{loadMore}}"> <progress type="circular"></progress> <text>More</text> </list-item> </list> </div> </template> <style> .container{ flex-direction: column; } .list { padding-left: 10px; padding-right: 10px; columns: 1; flex-direction: column; border-color: #FF0000; border-width: 5px; } .item { flex-direction: column; align-items: flex-start; margin-bottom: 15px; border-color: #9400D3; border-width: 5px; margin-right: 20px; background-color: #f76160; } .load-more { justify-content: center; align-items: center; height: 100px; border-color: #bbbbbb; border-bottom-width: 1px; } .btn-little { flex: 1; height: 80px; margin-left: 15px; border-radius: 5px; color: #ffffff; font-size: 30px; text-align: center; background-color: #0faeff; } .nav { padding-left: 60px; padding-right: 60px; padding-bottom: 30px; } .nav-item { flex: 1; padding-bottom: 30px; border-bottom-width: 5px; border-color: #fbf9fe; font-size: 35px; color: #666666; text-align: center; } </style> <script> import prompt from '@system.prompt' export default { data: { componentName: 'list', loadMore: true, listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], listData: [], scrollPage: false, }, onInit: function () { this.$page.setTitleBar({ text: 'list' }) for(var index = 0; index < 100; index++){ this.listData[index] = 'A'; } }, scrollbottom: function () { prompt.showToast({ message: 'The list slides to the bottom and starts loading other data.' }) // Load next page var that = this var renderData = [].concat(that.listData, that.listAdd) setTimeout(function () { that.listData = renderData }, 1000) }, // monitoring during sliding scroll: function (e) { let msg = 'scroll' + '.scrollX:' + e.scrollX + ' .scrollY:' + e.scrollY + ' .scrollState:' + e.scrollState console.info(msg) }, listItemClick: function (e) { e.stopPropagation() console.info('List Item is clicked.') prompt.showToast({ message: 'List Item is clicked.' }) }, listClick: function (e) { e.stopPropagation() console.info('List is clicked.') prompt.showToast({ message: 'List is clicked.' }) }, listLongPress: function (e) { e.stopPropagation() console.info('List is long pressed.') prompt.showToast({ message: 'List is long pressed.' }) }, } </script>Copy the code

Problem analysis

The above code uses list and list-item to load large amounts of data. However, the list-item view is not reused.

We know that the engine of quick application is an Android APK. List and list-item are finally implemented through the Android ListView, BaseAdapter, etc. In fact, we know that the list interface will not recreate the view beyond the area displayed on the screen. Instead, you reuse views that were first visible on the interface, just refreshing the data. The view for each row is actually a list-item.

The above code appears to be a list, but there is only one list-item. The developer uses a for loop inside the list-item, and each loop creates a new view. When there is a large amount of data, the memory will be occupied more and the phone will be short of memory, so the application performance will be seriously affected. Lead to slip stuck.

The solution

Based on the characteristics of the list component, the if or for instruction should be carefully used inside the list-item. According to the characteristics of each row of the list, different types should be set on the list-item, the list-item should be reused as much as possible, and the FOR statement should be used on the List-item. The modified code looks like this (note the list-item section) :

<template> <div class="container"> <div class="nav"> <text class="nav-item">list</text> </div> <! -- List --> <list class="list" onclick="listClick" onlongpress="listLongPress" onscrollbottom="scrollbottom" id="list" scrollpage="{{scrollPage}}"> <list-item type="listItem" class="item item-color" onclick="listItemClick" for="{{listData}}"> <text class="txt">{{$item}}--{{$idx}}</text> </list-item> <! -- <list-item type="listItem" class="item" onclick="listItemClick" if="{{listData.length>0}}"> <div for="{{listData}}" style="flex-direction:column;" > <text class="txt">{{$item}}--{{$idx}}</text> </div> </list-item> --> <! -- Loading More --> <list-item type="loadMore" class="load-more" if="{{loadMore}}"> <progress type="circular"></progress> <text>More</text> </list-item> </list> </div> </template>Copy the code

Comparison of code operation effect diagram:

Figure 1 Effect after modification

FIG. 2 Effect before modification

As we can see from the above illustration, although all are list data, each row in Figure 1 is a list-item (the background color of the LIST-item CSS is set to red), and the type value is the same, which can be reused well. However, there is only one List-item in Figure 2. List data is used as children of list-item. The effect in Figure 2 is similar to that of loading a lot of list data using a normal div. The root cause is that the developer does not understand list and list-item well enough.

For more details, see:

Quick app List development guide:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism