How can front-end data binding avoid stutters caused by too much data on the page?

use the variable news to save the news data obtained from the interface 

:api.xxx.com/api/news/?pageNumer=1&pageSize=50

js:
this.setData({
  news:data.data
})

wxml:
<block wx:for="{{news}}" wx:for-item="new">
  <view>{{new.xx}}</view>
</block>

:
api.xxx.com/api/news/?pageNumer=2&pageSize=50

if(this.data.totalPage > this.data.pageNumber) {
  var newData = this.data.news.concat(data.data);
  this.setData({
    news: newData
  });
}

when you pull up 6 times, the newsData data is 50 * 6 = 300 pieces of data, which will be stuck in 2 seconds when directly bound to the web page.
about loading the more stuck.
is there any good solution to this situation?

WeChat-Mini-Programs javascript
Mar.14,2021

when scrolling, do the dom removal work, only show the news that appears on the screen, the news outside the screen will remove the content dom, you can check the Wechat web version! This is what thousands of friends in Wechat's web version do!

1. Take a look at the function throttling and anti-shake, control paging requests,
avoid making multiple paging requests in a short period of time, and ensure that only 50 more data are loaded at a time

2. Node optimization, avoid too many useless nodes, reduce picture quality as much as possible, and load pictures lazily.
can also do the work of removing dom as mentioned in the first answer, but calculate the placeholder.

in fact, the first point should be a great solution to the problem

is similar to paging, showing only the data of the current page

Previous: How C-sharp converts some letters in one content into another

Next: Use Mini Program touch event and touch end to simulate long press?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu