Swipe Widget with Scroll

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
    }
  });
});

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();
}