问题标签 [ion-slides]

我们创建了一个使用离子幻灯片的 Ionic 4 应用程序。每张幻灯片都包含一张照片、一个 HTML5 音频播放器和一些文本。第一张幻灯片上的 HTML5 音频播放器看起来不错，但随后的幻灯片最初会在播放器上显示时间控制滑块和文本（运行时间数字），但随后这些都在很短的时间（毫秒）后消失。但是，播放/暂停按钮仍会呈现，播放器本身将播放正确的音频流。幻灯片的其余部分看起来不错；只有音频播放器不完整。

音频播放器在我们测试过的所有 Android 实例以及 iOS 12 设备上都能正常工作。我们只看到 iOS 13 的问题。我们曾考虑使用另一个音频播放器，但我们的应用目前处于 beta 测试阶段，并且严重依赖 HTML5 音频播放器 API。关于我们可以尝试解决问题的任何想法？

尝试使用 Safari 运行 ionic serve 并且效果很好（在运行 Catalina 的 Mac 上）。还将 safari 附加到应用程序的运行实例，并且看不到第一张和第二张幻灯片的 HTML 元素之间有任何区别。

我希望每张幻灯片上的音频播放器都具有与初始幻灯片相同的控件。

我的 Ionic 4 项目中有一个基本滑块，但 this.slides 在每一点都未定义。几天前这行得通，我只是想不通为什么它现在行不通。

TS-文件：

模板：

错误：

带有“this.slides.slideNext();”的下一个和上一个按钮 有同样的错误。

我正在使用 ion-slides 来制作一个带有不同“可选”标签的滑块，如下图所示

我已经做到了。我正在努力解决的问题是，我需要使我单击的幻灯片处于选中状态，而较旧的幻灯片未选中，而无需像以下屏幕截图那样滚动到该幻灯片

我可以通过以下我为点击操作注册的片段动态获取点击索引

然后稍后在代码上我得到了事件

有谁知道如何在不滚动的情况下更改活动幻灯片？

我有一个已经实施了离子幻灯片的 Ionic 4 项目。一切都很好，直到最近对 Ionic 进行了更新（不到一个月前），他们突然停止了工作。

在第一次加载时，它们似乎很好，但之后的任何加载：

• 寻呼机不工作或出现
• 图像大小不正确
• 滚动有效，但不会像应有的那样将幻灯片捕捉到中心

第一次加载工作： 离子幻灯片的图像如预期

第二次加载没有： 离子载玻片损坏的图像

没有错误消息或警告，并且截至 1 个月前，以下所有代码都可以正常工作，此后没有进行任何更改。它只是随机坏了。

HTML：

TS：

我尝试进一步隔离问题。这个 HTML 仍然失败：

重申一下，关于这个组件的一切都在不久前工作。然后，在最近的一次更新中，我开始在我的项目中看到 Ionic CSS 弃用警告。它们看起来像这样：

自那次更新以来，离子滑道破裂并决定停止工作。请帮忙！

我正在尝试ion-slides在模态中使用。

尝试了许多不同的方法，但它总是可以自由拖动停在任何位置。

它看起来像component没有设置。

我的 HTML

我的 TS

难道我做错了什么？

我在我的项目中使用了离子幻灯片。代码如下：

在使用slideConfigoptions之前，幻灯片运行良好autoplay: true。幻灯片配置选项代码如下。

问题主要发生在我旋转屏幕时。我正在尝试显示宽度为 120 像素的卡片。即使在旋转之后，哪个始终是 120 像素？旋转卡前滑动正常，但旋转后卡滑动太快。那么我该如何解决这个问题呢？

请注意一件事，每当我旋转slidesPerView意志时dynamic。例如，在portrait模式中slidesPerView可能是3针对device. 对于同一设备，如果用户旋转设备，则slidesPerView可能是 5。为了实现这一点，我使用了@HostListener('window: resize')功能。但是如果我在模式下加载项目，portrait那么如果我旋转设备然后autoplay滑动一点点快。我知道问题的发生是因为slidesPerView是动态的。但我不能同时修复slidesPerView幻灯片需要自动播放。我怎样才能做到这一点？

我正在使用 ion-slide 并在第二张幻灯片放大和缩小上转换我的图像，它在我的主幻灯片上溢出。

这是我的主要幻灯片，第二张幻灯片溢出：

HTML：

CSS：

我使用了 z-index 和 overflow-x:hidden 但什么也没发生

我在这样的页面中有一个离子幻灯片：

这是我的组件：

问题是 slideTo 和 getActiveIndex 方法都不起作用，我也尝试等待承诺的捕获，但没有发生任何事情。有人可以帮我弄清楚为什么吗？

更新：我的 ionslide 在 IonTab 内。我已经尝试在没有标签的情况下直接在页面中插入幻灯片，一切正常。知道为什么标签会破坏幻灯片吗？

我有两张离子幻灯片，每张都包含一个常规列表。我的问题是，每次我滚动其中一个时，另一个同时滚动。

有没有办法让每个列表单独滚动？

我的代码有点像这样：

[编辑，帖子底部的新信息]

在我的应用程序中，我有几个不同的页面，其中包含一个 ion-slides 元素。除了一个之外，它们都可以正常工作，并且我已经设法跟踪 *ngFor 指令。

这是页面的html代码：

填充“plafond”对象的打字稿代码是：

getPlafondData 返回一个正确解析的承诺，这是我得到的 JSON 对象：

我已经使用 jsonlint.io 进行了验证。这是有效的。如果我不使用 *ngFor 指令，而是使用符号 plafond[index] 创建 9 张幻灯片，则这些幻灯片将正确呈现并可用。

真正奇怪的是，在应用程序的另一个页面上，我还有另一个滑块：

它以几乎相同的方式完美地获取数据：

几天来，我一直在努力解决这个问题，但找不到任何明显的东西。

这是我的离子信息输出：

编辑好吧，这比我想象的还要奇怪。如果我在 ion-slides 定义中放入 mode="xxx" ，它可以工作.. 倒置。如果我输入<ion-slides mode="ios">，它可以在android设备上运行，但不能在 iPhone 上运行。反之亦然，如果我把<ion-slides mode="md">它放在iPhone上而不是 android 上。这真的很奇怪。