blocks|key|32833|text|下面是我将如何在一般的代码行中这样做。如果这似乎让你满意，我将编辑并添加更多细节。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32834|版本2：(有关第一个版本，请参阅编辑更改)|32835|前提：|32836|numberOfLinesToLoadAfter|32837|JavaScript包含动态列表的标记将被称为“区域”。number|unordered-list-item|32838|
|32839|rowspage#+|32840|32841|列表的每一行都将包含在另一个可以包含任何内容的DIV中。|32842|32843|一页足以覆盖该区域。|32844|32845|三个javascript“常量”：用于保存所需数据的numberOfLinesOnFirstLoad、numberOfLinesOnPageLoad、numberOfLinesOnPageLoad变量:+rowspage#，heightspage#，currentPageNumber+=+1，maxPageNumber+=+0|32846|32847|+page+#：#是页面number|32848|32849|rowspage#应包含一种从数据库中取回数据的方法，而不是真正的DOM对象。|32850|32851|步骤/事件：|32852|32853|添加区域标记。|ordered-list-item|32854|加载numberOfLinesOnFirstLoad行。|32855|如果总行数高度低于区域高度乘以3，则加载numberOfLinesToLoadAfter行。如果添加了行，请重复步骤3，否则继续执行步骤4.|32856|maxPageNumber+%2B=1。查找填充区域的下一行。将这些行添加到行"page"+%2B+maxPageNumber。计算这些元素的高度，并将其添加到height“page”%2B+maxPageNumber.|offset|length|32857|Repeat步骤4中，直到没有更多的行，然后继续到步骤6。|32858|当向下滚动且page1+(表示行的最后一个元素“page1”)不可见时，在下面添加另一个元素:+page4。|32859|maxPageNumber+%2B=+1.加载numberOfLinesOnPageLoad行。|32860|如果新行的总高度低于区域高度，则为numberOfLinesToLoadAfter行。如果添加了行，请重复步骤8，否则将新行的总高度放在高度“page”%2B+maxPageNumber中，并将新行作为数组放入行“page”%2B+maxPageNumber中，并在输入此行后继续执行此步骤(因此可以选择9或11)。|32861|仍在向下滚动，如果看不到page2，请从DOM中删除page1元素，并通过删除page1.height+(heights"page1")来调整滚动位置。|32862|加载第5页(步骤7和8)。|32863|现在，在看不到page2和page5的区域中有page2+to+page5。如果page3完全可见，则page4不可见，否则page3和page4的一部分可见。(只是为了表明可能性，但不是important)|32864|When向上滚动并且page2开始可见(所以行的最后一个元素“page2”)，使用行“page1”加载page1，添加page1.height+(高度“page1”)到滚动位置，并从DOM中删除page5。在这里，您可以将其从变量|32865|+&&+heights和maxPageNumber+-=+1中删除，但也可以保留它们，以便在一个进程中完成重新加载此页面(因此，加载页面将意味着检查这些变量中是否已存在页面定义)。|32866|entityMap|0|LINK|mutability|MUTABLE|url|as+an+array^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|11|M|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|28|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|29|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|2A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|2B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|2C|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2D|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|2E|8|@]|9|@]|A|$]]|$1|O|3|L|5|6|7|2F|8|@]|9|@]|A|$]]|$1|P|3|Q|5|J|7|2G|8|@]|9|@]|A|$]]|$1|R|3|L|5|6|7|2H|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|2I|8|@]|9|@]|A|$]]|$1|U|3|L|5|6|7|2J|8|@]|9|@]|A|$]]|$1|V|3|W|5|J|7|2K|8|@]|9|@]|A|$]]|$1|X|3|L|5|6|7|2L|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|2M|8|@]|9|@]|A|$]]|$1|10|3|L|5|6|7|2N|8|@]|9|@]|A|$]]|$1|11|3|12|5|J|7|2O|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|17|3|18|5|19|7|2S|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|19|7|2T|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|19|7|2U|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|19|7|2V|8|@]|9|@$1G|2W|1H|2X|1|2Y]]|A|$]]|$1|1I|3|1J|5|19|7|2Z|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|19|7|30|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|19|7|31|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|19|7|32|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|19|7|33|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|19|7|34|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|19|7|35|8|@]|9|@]|A|$]]|$1|1W|3|1X|5|19|7|36|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|37|8|@]|9|@]|A|$]]|$1|20|3|-4|5|6|7|38|8|@]|9|@]|A|$]]]|21|$22|$5|23|24|25|A|$26|27]]]]

Here is how I would do it in general lines. If this seems to give you satisfaction, I'll edit and add more details.

Version 2 : (For first one, see edit changes)

Premises :

<ol>
<li>The tag containing the dynamic list will be called "the zone".</li>
<li>Each row of the list will be contained in another DIV which can contains anything.</li>
<li>A page is enough rows to cover the zone.</li>
<li>Three javascript "constants" : numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter</li>
<li>JavaScript variables to hold required data : rows[page#], heights[page#], currentPageNumber = 1, maxPageNumber = 0</li>
<li>page# : # is the page number</li>
<li>rows[page#] shall contains a way to get them back from database, not real DOM objects.</li>
</ol>

Steps / Events :

<ol>
<li>Add the zone tag.</li>
<li>Load numberOfLinesOnFirstLoad rows.</li>
<li>If total rows height inferior zone height multiplied by three, then load numberOfLinesToLoadAfter rows. Repeat step 3 if rows added, otherwise continue to step 4.</li>
<li>maxPageNumber +=1. Find the next rows that full fills the zone. Add those rows to rows["page" + maxPageNumber] (as an array). Calculate the height of those and add it in heights["page" + maxPageNumber].</li>
<li>Repeat step 4 until no more rows and then continue to step 6.</li>
<li>When scrolling down and page1 (which means last element of rows["page1"]) is not visible, add another below : page4. </li>
<li>maxPageNumber += 1. Load numberOfLinesOnPageLoad rows.</li>
<li>If total new rows height inferior zone height, then numberOfLinesToLoadAfter rows. Repeat step 8 if rows added, otherwise put total new rows height in heights["page" + maxPageNumber] and the new rows as array in rows["page" + maxPageNumber] and continue to the step after entering this one (so either 9 or 11).</li>
<li>Still scrolling down, if page2 is not visible, remove the page1 elements from DOM and adjust scroll position by removing page1.height (heights["page1"]). </li>
<li>Load page 5 (step 7 and 8).</li>
<li>So now, there is page2 to page5 in the zone which page2 and page5 are not visible. If page3 is fully visible, than page4 is not, otherwise a part of page3 and page4 are visible. (Just to indicate possibilities, but not important)</li>
<li>When scrolling up and page2 is starting to be visible (so last element of rows["page2"]), load page1 by using rows["page1"], add page1.height (heights["page1"]) to scroll position and remove page5 from DOM. Here you can either remove it from variables rows &amp;&amp; heights and maxPageNumber -= 1, but you can also keep them so that reloading this page is done in one process (so loading a page would imply to check if page definition already exists in those variables).</li>
</ol>

I was watching Matthew Podwysocki event on <a href="https://www.youtube.com/watch?v=zlERo_JMGCw">https://www.youtube.com/watch?v=zlERo_JMGCw</a> 29:38

Where he explains how they solved scroll on netflix. Where user scroll for more data as previous data gets cleaned up and more adds up (but scroll back shows previous data again).

I wanted to do similar, but I grabbed netflix demo code: 

<pre><code>function getRowUpdates(row) {
 var scrolls = Rx.Observable.fromEvent(document, 'scroll');
 var rowVisibilities = 
 scrolls.throttle(50)
 .map(function(scrollEvent) {
 return row.isVisible(scrollEvent.offset);
 })
 .distinctUntilChanged();

 var rowShows = rowrowVisibilities.filter(function(v) {
 return v;
 });
 var rowHides = rowrowVisibilities.filter(function(v) {
 return !v;
 });

 return rowShows
 .flatMap(Rx.Observable.interval(10))
 .flatMap(function() {
 return row.getRowData().takeUntil(rowHides);
 })
 .toArray();
}
</code></pre>

But I'm bit confused on how to pass new data or page data according to the scroll here.. Can someone give little explanation on how I can do the following:

<ul>
<li>fetch first list (I can do that)</li>
<li>fetch more list as user scroll down (using paging next page)</li>
<li>remove previous fetched data from memory, and refetch on request (scroll up). </li>
</ul>

RxJS Polling for row updates on infinite scroll

数据库

我在 29:38看Matthew Podwysocki的活动他解释了他们是如何在netflix上解决滚动问题的。当先前的数据被清理并累积更多数据时，用户滚动获取更多数据(但回滚会再次显示先前的数据)。我也想做类似的事情，但我抓取了netflix的演示代码：function getRowUpdates(row) {  v...

问无限滚动上行更新的RxJS轮询
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动上行更新的RxJS轮询EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无限滚动上行更新的RxJS轮询
EN