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?


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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf4200-31ec3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf4200-31ec3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?