滚动滑动微件

尝试一下在线预览

这个示例使用多个 滑动微件 在墨西哥不同的教育成就图层之间创建一个看似无限的滚动。

它是如何工作的呢?

对于从 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
    }
  });
});

当用户在应用程序中滚动时,leadingLayerstrailingLayers 会随着滑动微件 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.