我正在使用angular-ui的ui-scroll(很棒的工作,组件太棒了!)。
大部分都运作良好。当我向下滚动时,数据从自定义数据源加载。但是,当我滚动回到顶部时,我最终在视口中有很多空格。
经过检查,看起来ui-scroll正在添加一个子div并动态设置高度,但由于某些原因,当我滚动到视口的顶部时,这不会被设置回0。 / p>
我猜这与我的数据源提供数据的方式有关。我也没有围绕负面索引包围我的头脑。有人解释当我映射到标准分页服务(索引+偏移等)时,我应该如何计算datasource.get()函数中的负索引?
答案 0 :(得分:0)
好吧,我认为我找到了解决方案......希望这会帮助其他人,因为我无法在angular-ui团队提供的演示中找到一个有效的例子。
基本上,当你收到一个负数指数时,你必须1)将指数限制为0,然后用差值调整计数变量。
以下是一些示例代码:
dataSource.get = function (index, count, successCallback)
{
// Index provided is 1-based, we'll convert to 0-based and clamp at 0
var realIndex = Math.max(1, index) - 1;
if (index < 0) {
count -= 1 - index;
}
if (realIndex < 0 ||
count == 0 ||
realIndex >= vm.searchResultCount)
{
successCallback([]);
return;
}
...
Make a pagination call to a service that expects the first
page of results to be at index 0.
答案 1 :(得分:0)
在数据有限的情况下,Ui滚动数据源实现可能如下所示
var min = 1, max = 100;
dataSource.get = function(index, count, success) {
var start = Math.max(min, index);
var end = Math.min(index + count - 1, max);
if (start <= end) {
getDataAsync(start, start + end + 1).then(success);
}
else {
success([]);
}
};
这允许您处理以min
索引开头的数据数组。您也可以通过var end = index + count - 1
轻松删除底部限制。
但我也想说,这可能是一个后端责任。请看这个示例:https://rawgit.com/angular-ui/ui-scroll/master/demo/append/append.html - 数据数据限制在1到50之间,而数据源(跳过详细信息)只是
get: function (index, count, success) {
Server.request(index, count).then(success);
}