这个示例使用多个 滑动微件 在墨西哥不同的教育成就图层之间创建一个看似无限的滚动。
对于从 WebMap 加载的每一图层,都会创建一个滑动微件,并将该图层添加到 trailingLayers
。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// create a swipe widget for each layer
swipes = layers.map((layer) => {
return new Swipe({
view: view,
disabled: false,
position: 100,
direction: "vertical",
trailingLayers: [layer],
visibleElements: {
handle: false,
divider: true
}
});
});
当用户在应用程序中滚动时,leadingLayers
和 trailingLayers
会随着滑动微件 location
的变化而更新,以实现无限滚动的效果。
1
2
3
4
5
6
7
8
9
10
// To achieve this infinite scroll effect we need to swap the layers:
// The layer starts at the bottom, the divider goes up.
// Then the next layer starts to show up, so we put back the divider at the bottom and swap the layers.
if (position < 0 && swipe.trailingLayers.length) {
swipe.leadingLayers.addMany(swipe.trailingLayers);
swipe.trailingLayers.removeAll();
} else if (position >= 0 && swipe.leadingLayers.length) {
swipe.trailingLayers.addMany(swipe.leadingLayers);
swipe.leadingLayers.removeAll();
}
Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.