问题标签 [virtualscroll]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1903 浏览

javascript - 过滤Angular-ui滚动

我正在尝试在一个简单的网格上实现无限类型滚动。html是这样的:

我想根据搜索框模型过滤网格中的内容,看起来很简单。我通常只会将以下内容与 ng-repeat 一起使用

但是,使用“ui-scroll”而不是 ng-repeat 我收到一个错误

我是否遗漏了有关如何使用 Angular-ui 滚动过滤数据的内容?我在滚动库中看到导致问题的行,如果还有其他问题,则会引发错误

这让我觉得在 Angular-ui 滚动中过滤是不可能的。有什么想法吗?

0 投票
1 回答
823 浏览

angularjs - 防止 angular-ui ui-scroll 在隐藏的 div 中加载

我有一个 angular-ui ui-scroll 指令(1.3.0)住在一个 div 中,默认情况下使用 ng-show 隐藏。当它被隐藏时,即使设置了 ui-scroll-viewport 的高度,ui-scroll 也会继续从数据源加载数据。如果显示了 div,则它的行为正确。所以,现在我的 div 是 1px 宽:/

我确信我可以使用 ng-if 将其动态添加到 DOM 来解决这个问题。但是,我希望 div 能够响应地隐藏/显示 - 所以从 css 中删除。

关于如何让 ui-scroll 在隐藏时仅从缓冲区加载 1 页的任何建议?谢谢你。

0 投票
2 回答
3663 浏览

angularjs - 如何对自己的数据使用“ui-scroll”?

我正在尝试在我的应用程序中创建无限滚动功能,但感觉有点抽象。我想使用ui-scroll这个 fiddle展示了一个简单的例子来说明它是如何工作的。

我已经阅读了自述文件并查看了一些示例,我还将示例集成到我的项目中并使其正常工作,但我无法弄清楚如何将其与我自己的数据库中的数据结合起来。

我有一个名为电影的数据库表。电影有一些值,例如title, release_date,image_url

我将如何将该数据插入到我的视图中,$scope.movieDataSource以便我可以在我的视图中使用它?

我试图创建一个我想要达到的例子。我使用 http.getuserMovies用我的数据库中的记录填充我的范围,我想将这些记录用作movieDataSource.

但是当我访问页面时,我ui-scroll确实在容器中添加了结果,但它不显示内容。

如果我console.log("movieDataSource" + $scope.movieDataSource)显示我movieDataSource[object Object]

0 投票
2 回答
8353 浏览

javascript - 如何使用 angularJS 制作虚拟滚动?

我正在尝试制定一个可以进行虚拟滚动的指令,因此当用户滚动表格时,表格会删除“旧”视图并添加“新”视图,类似于收集重复但我一直失败,我想我不明白它背后的数学原理,有人可以帮助我吗?

这是我的指令代码:

0 投票
1 回答
725 浏览

angularjs - 使用 Angular UI-Scroll 在列表顶部添加项目

我正在使用 Angular UI 滚动。我下面的例子就是这个这里有一个演示页面。它具有在特定位置添加列表项的功能。以下是代码的摘录:

此功能将在第 3 位添加列表项。但是,我不能使用这个在顶部添加元素(即到列表顶部)。我试着把scope.$index == 0而不是scope.$index == 2. 如果我使用scope.$index == 1,它将在第二个位置添加元素。ui-scroll 中还有一个 prepend 功能,但我不知道如何使用它来始终将项目添加到列表顶部。新添加的项目应始终位于位置 1。

任何建议将不胜感激。

0 投票
1 回答
4788 浏览

javascript - javascript上的虚拟滚动

我使用这个 fiddle进行虚拟滚动。

我不明白如何获得真正的可滚动高度;

如果我更改行大小,它将不起作用。

如果我做小尺寸,比如200,它也不起作用。

0 投票
3 回答
7092 浏览

html - Angular 2+ 的虚拟滚动

你好呀!

我需要使用 Angular 2+ 创建一个包含这么多记录的表。为此,我正在尝试虚拟滚动。尽管如此,我还是找不到任何处于工作状态的文档或样本。

请帮助我开始使用 Angular 2+ 虚拟滚动。

0 投票
2 回答
477 浏览

javascript - 使用 vue-virtual-scroller 时 content-tag 和 main-tag 来自哪里

我正在尝试了解 vue 虚拟滚动条。我在演示中注意到它使用了几个 HTML 属性...

<virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">

链接到源代码上的特定行

这种能力从何而来,它的文档在哪里?

0 投票
1 回答
109 浏览

angular - Ionic App 中的虚假虚拟滚动

出于性能原因,我试图在 Ionic 应用程序中模仿虚拟滚动(表格单元回收)。在我的应用程序中,我有一些屏幕上有数百个带有图像的项目。出于这个原因,我不能同时显示它们。Ionic 中的 virtualScroll 组件应该可以解决问题,但遗憾的是,目前存在一个不允许它与动态管道一起使用的错误。

我想建立自己的虚拟滚动技术,但我不认为我准备好创建自己的合法虚拟滚动。我的问题是:我可以通过显示来模仿虚拟滚动:无,以及对不在视口中的项目的父组件设置高度吗?这会实现完全虚拟滚动将实现的一些性能改进吗?

0 投票
0 回答
482 浏览

angular - Ionic 3 virtualscroll 无法在滚动时正确呈现(视频)

在之前的 ionic 版本中,我在虚拟滚动方面遇到了一些问题(项目被渲染重叠并且需要永远正确渲染)。

自上次更新以来,情况变得更糟,滚动会使虚拟滚动无法正确呈现。

这是一个屏幕截图: https ://youtu.be/tfYSLy6p-y01

这是我的代码片段。所有属性都正确填充,并且 mzk-thumb 的高度和宽度在 CSS 中被锁定。

“medias”对象在设置后也没有被修改……</p>

有关信息:

cli 包:(/Users/millerf/Documents/www/Mozaik/mzk_app/node_modules)

全局包:

本地包:

系统:

环境变量:

杂项: