Ionic slider：让卡片不粘

Question

我正在使用 ionic 滑块显示 3 张卡片，每张卡片占据屏幕宽度的 90% 左右（以便下一张稍微可见）

Here's how it looks

 <ion-slides [options]="{ slidesPerView: 'auto'}">
    <ion-slide>
        test 1
    </ion-slide>
    <ion-slide>
        test 2
    </ion-slide>
    <ion-slide>
        test 3
    </ion-slide>
</ion-slides>

问题是，当我开始拖动幻灯片并释放它时，它并没有停留在我离开的位置（例如幻灯片之间），而是将焦点移动到占据大部分屏幕的图像.它是“粘性的”。

我想要实现的是，每当我抓住幻灯片时，它会停留在释放时的位置，而不是向左或向右移动。

例如，如果用户离开它，我需要它保持这样： Desired look

如何实现？

谢谢！

Answer 1

但这就是 ion-slides 的工作方式，它试图模仿原生 PagerView 的行为（在 android 的情况下）。

您想要的是一个简单的水平可滚动区域。你不需要离子，它可以很容易地使用网络技术实现 (css):

<style>
.slider {
    display: -webkit-box;
    overflow-x: scroll;
}
.slider .slider-item {
    width: 90%;
    margin-right: 20px;
}
</style>

<div class="slider">
    <div class="slider-item">...</div>
    <div class="slider-item">...</div>
    <div class="slider-item">...</div>
</div>

Ionic slider：让卡片不粘

Ionic slider: Allow cards not to be sticky

ionic-framework

ionic5