问用于长文本虚拟化的ui-滚动
EN

Stack Overflow用户

提问于 2020-01-31 15:42:33

回答 1查看 271关注 0票数 2

使用ui-滚动显示非常长的文本(在MBs中)的最佳方法是什么？文本以数组的形式可用，但需要像文本区域一样以长文本文档的形式显示。我使用ui-滚动，因为文本中的每个单词都是一个可点击的锚标记。

用户界面滚动td显示每个单词为列，行为行是唯一的方式吗？

更多信息

我有一个包含> 2000元素(words)的大型数组，用户可以动态地更改它(元素的数量和元素本身)。
我需要将这些元素显示为单个文档，其中每个元素(word)都是一个超链接，单击该链接执行某些操作。
我需要它看起来像一个简单的可滚动的div，其中有这些单词显示为长自由流动的可点击文本。
我之前使用$compile动态创建html，但是初始编译时间和元素上的编译更改非常重要(秒)，因为每次都必须编译/呈现整个元素列表。

1. So I thought of using ui-scroll to display which virtualizes and renders only the displayed content.
2. But ui-scroll always display each element in a separate line like a row which is not the desired behavior for my use case.

Input:
    myList = ["Hello", "World", "This", "is", "my", "first", "dream"].

 desired Output (each word in same line with auto wrap just like a div):

 <div>
     <span ng-repeat="w in myList">
         <a ng-click="someAction()">myList[$index]</a>
         &nbsp; 
     </span>
  </div>

  Hello World This is my first dream

ui-scroll:

    <div>
       <span ui-scroll="at in info">
          <a id="at-{{$index}}" ng-click="someAction($index, $event)">
             myList[$index]}}
          </a>
          &nbsp;
       </span>
      </div>


  ui-scroll output (each word in separate line):
  Hello
   World
   This
   is
   my
   first
   dream

请注意，上面的每个字都是一个可点击的锚。谢谢。

angularjs

virtualscroll

ui-scroll

回答 1

Stack Overflow用户

发布于 2020-02-15 10:53:56

不幸的是，这是完全不可能的角用户界面滚动，因为它不支持内联/浮动元素。一些尝试曾在2015年实现这一特性，但现在它似乎永远冻结了。

无限逼近

你正在开发的案例非常有趣。作为一种可能的解决办法，我建议尝试“无限”方法，而不是“虚拟化”方法。可以在没有附加库的情况下实现无限滚动，可以将其分解为以下步骤：

最初在视图中添加N个单词
如果viewport的scrollHeight === clientHeight，再添加N个单词；在滚动条出现之前做一个循环
侦听视图端口的scrollTop更改，在滚动发生时调用以下命令
如果scrollTop + clientHeight === scrollHeight增加N个单词；在一个循环中添加N个单词，直到视图端口(scrollHeight)的高度增加，或者直到单词结束

这将大大降低初始渲染的成本，但由于未销毁视图之外的元素，每个新元素注入的总体性能将下降。

Virtualization

在实现了“无限”方法之后，我认为您可能会尝试将这个特定的无限滚动情况转换为虚拟情况。让我们想想可能需要什么。首先，您需要另外两个元素，例如，顶部和底部填充元素，它们将模拟虚拟单词。然后，您需要通过以下方式扩展“无限”方法的最后一步：

查看相反的方向，找到第一个在视口中可见的元素；这可以通过多种方式完成(这里和数百个其他链接)。
记住scrollHeight，在找到一个元素之前剪掉所有元素，将顶部填充元素的高度设置为记住的值，使结果scrollHeight与裁剪前相同。
取决于环境/需求，您可能还需要纠正滚动位置，因为它可能在裁剪过程中跳起；我不想在这里讨论跳回问题，只是对默认的溢流锚行为感到高兴(尽管您必须忘记边缘和其他悲伤的家伙)。
应该重新考虑处理程序中的条件scrollTop + clientHeight === scrollHeight (例如，“如果我们位于最底层”)，因为我们可能有非零的底部填充元素；因此，它应该类似于“如果我们位于最底层，或者如果底部填充元素变为可见的”。
如果满足上述条件，则需要一次又一次地添加N个单词，直到底部填充变得不可见为止，每次注入都应该通过减小底部填充元素的scrollHeight值来完成；只有当“我们在最底部”时的边缘情况才会导致视口的scrollHeight不可撤销的增加。