2

使用 ui-scroll 显示很长的文本（以 MB 为单位）的最佳方式是什么？文本以数组的形式提供，但需要像 textarea 一样显示为长文本文档。我正在使用 ui-scroll，因为文本中的每个单词都是可点击的锚标记。

ui-scroll-td 是否将每个单词显示为列并将行显示为行的唯一方法？

更多信息

  1. 我有一个包含 > 2000 个元素（单词）的大数组，用户可以动态更改（元素数量和元素本身）。

  2. 我需要将这些元素显示为单个文档，其中每个元素（单词）都是一个超链接，单击该超链接会执行某些操作。

  3. 我需要它看起来像一个简单的可滚动 div，其中这些单词显示为长自由流动的可点击文本。

  4. 我之前使用 $compile 来动态创建 html，但是初始编译时间和元素更改时的编译非常重要（秒），因为我必须每次编译/渲染整个元素列表。

    1. 所以我想到了使用 ui-scroll 来显示哪个虚拟化并只渲染显示的内容。

    2. 但是 ui-scroll 总是在单独的行中显示每个元素，例如一行，这不是我的用例所需的行为。

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

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

4

1 回答 1

1

不幸的是，这对于 angular-ui-scroll 是完全不可能的，因为它不支持内联/浮动元素。2015 年曾有人尝试实现此功能，但现在它似乎永远冻结了。

无限接近

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

  • 最初将 N 个单词添加到视口中
  • 如果视口的scrollHeight=== clientHeight，则再添加 N 个单词；循环直到出现滚动条
  • 监听视口的scrollTop变化，滚动发生时调用跟随
  • if scrollTop+ clientHeight===scrollHeight再添加 N 个单词；也在循环中，直到视口（scrollHeight）的高度增加或直到单词结束

这应该会大大降低初始渲染的成本，但由于视图外的元素没有被破坏，每次注入新元素时整体性能都会降低。

虚拟化

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

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

这样我们将正确地覆盖向下滚动。您显然需要考虑向上滚动并在“顶部填充可见或我们位于最顶部”时运行类似的过程。此外，“我们处于最高/最低”和“元素变得可见”条件可以通过一些对 UX 友好的增量进行扩展，例如，“我们几乎处于……”和“元素几乎可见”。

我不认为这个计划涵盖或应该涵盖所有可能的边缘情况和要求，这只是一个想法，如何从头开始，我猜这是你唯一的方法，我的意思是你自己的完整实施。如果我错了，我会很高兴，并且很想看看某人的现成解决方案。

于 2020-02-15T18:53:56.387 回答