时间戳

首页 > 解决方案 > 使用 scrollableWidth 和 scrollToHorizo​​ntalOffset 移动以使选定对象居中

javascript - 使用 scrollableWidth 和 scrollToHorizo​​ntalOffset 移动以使选定对象居中

问题描述

我有许多（10）个可点击的对象，但很难将选定的对象移动到滚动视图的中间。您可以在下图中看到数字 4 被选中但不在中间。

例子

我尝试使用：

myScrollView.scrollToHorizontalOffset(myScrollView.scrollableWidth / 2, true)

但它总是将整个滚动视图带到中间。任何人都可以帮助使其工作吗？先感谢您。

标签： javascriptnativescript

解决方案

由于您没有放置 Angular 标签，我假设您使用的是 Nativescript 的 Typescript 风格。

为了做到这一点，您必须找到一种方法来跟踪您的基地（起点）和您的目标（用户刚刚单击的那个），以便您可以到达那里 x 偏移量并将滚动动画从一个到其他。

这是您后面代码中的一个示例：

export function() {
   const base = page.getViewById('label1') as Label;
   const target = page.getViewById('label2') as Label;
   myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x, true);
}

现在，上面的代码将只进行最小滚动以到达您的目标元素（并且您可以使用示例标签以外的其他元素）。但是如果你想让它居中，你可以根据你的滚动容器的宽度添加一个额外的偏移量。例如。

myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x + (myScrollView.width / 2), true);

请注意，这是我以前做过的类似事情的假设（只是不需要成为中心）。所以可能需要使用额外的偏移量。

编辑：（这是如何根据 OP 的需要使其专门工作）

myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x - (myScrollView.scrollableWidth / 2)), true);

推荐阅读