问题标签 [ion-slides]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 带有 Ion 幻灯片的 iOS 13 中 HTML5 音频控件消失了
我们创建了一个使用离子幻灯片的 Ionic 4 应用程序。每张幻灯片都包含一张照片、一个 HTML5 音频播放器和一些文本。第一张幻灯片上的 HTML5 音频播放器看起来不错,但随后的幻灯片最初会在播放器上显示时间控制滑块和文本(运行时间数字),但随后这些都在很短的时间(毫秒)后消失。但是,播放/暂停按钮仍会呈现,播放器本身将播放正确的音频流。幻灯片的其余部分看起来不错;只有音频播放器不完整。
音频播放器在我们测试过的所有 Android 实例以及 iOS 12 设备上都能正常工作。我们只看到 iOS 13 的问题。我们曾考虑使用另一个音频播放器,但我们的应用目前处于 beta 测试阶段,并且严重依赖 HTML5 音频播放器 API。关于我们可以尝试解决问题的任何想法?
尝试使用 Safari 运行 ionic serve 并且效果很好(在运行 Catalina 的 Mac 上)。还将 safari 附加到应用程序的运行实例,并且看不到第一张和第二张幻灯片的 HTML 元素之间有任何区别。
我希望每张幻灯片上的音频播放器都具有与初始幻灯片相同的控件。
angular - ionSlides 未定义
我的 Ionic 4 项目中有一个基本滑块,但 this.slides 在每一点都未定义。几天前这行得通,我只是想不通为什么它现在行不通。
TS-文件:
模板:
错误:
带有“this.slides.slideNext();”的下一个和上一个按钮 有同样的错误。
angular - 为什么 Ionic 4 Ion-Slides 突然停止正常显示?
我有一个已经实施了离子幻灯片的 Ionic 4 项目。一切都很好,直到最近对 Ionic 进行了更新(不到一个月前),他们突然停止了工作。
在第一次加载时,它们似乎很好,但之后的任何加载:
- 寻呼机不工作或出现
- 图像大小不正确
- 滚动有效,但不会像应有的那样将幻灯片捕捉到中心
第一次加载工作: 离子幻灯片的图像如预期
第二次加载没有: 离子载玻片损坏的图像
没有错误消息或警告,并且截至 1 个月前,以下所有代码都可以正常工作,此后没有进行任何更改。它只是随机坏了。
HTML:
TS:
我尝试进一步隔离问题。这个 HTML 仍然失败:
重申一下,关于这个组件的一切都在不久前工作。然后,在最近的一次更新中,我开始在我的项目中看到 Ionic CSS 弃用警告。它们看起来像这样:
自那次更新以来,离子滑道破裂并决定停止工作。请帮忙!
angular - ionic 4 - 离子滑动组件不工作
我正在尝试ion-slides
在模态中使用。
尝试了许多不同的方法,但它总是可以自由拖动停在任何位置。
它看起来像component
没有设置。
我的 HTML
我的 TS
难道我做错了什么?
ionic-framework - 在ionic4中旋转时如何解决自动播放问题?
我在我的项目中使用了离子幻灯片。代码如下:
在使用slideConfig
options之前,幻灯片运行良好autoplay: true
。幻灯片配置选项代码如下。
问题主要发生在我旋转屏幕时。我正在尝试显示宽度为 120 像素的卡片。即使在旋转之后,哪个始终是 120 像素?旋转卡前滑动正常,但旋转后卡滑动太快。那么我该如何解决这个问题呢?
请注意一件事,每当我旋转slidesPerView
意志时dynamic
。例如,在portrait
模式中slidesPerView
可能是3
针对device
. 对于同一设备,如果用户旋转设备,则slidesPerView
可能是 5。为了实现这一点,我使用了@HostListener('window: resize')
功能。但是如果我在模式下加载项目,portrait
那么如果我旋转设备然后autoplay
滑动一点点快。我知道问题的发生是因为slidesPerView
是动态的。但我不能同时修复slidesPerView
幻灯片需要自动播放。我怎样才能做到这一点?
angular - Ionic 4 IonSlides slideTo 和 getActiveIndex 在 IonTab 中使用时不起作用
我在这样的页面中有一个离子幻灯片:
这是我的组件:
问题是 slideTo 和 getActiveIndex 方法都不起作用,我也尝试等待承诺的捕获,但没有发生任何事情。有人可以帮我弄清楚为什么吗?
更新:我的 ionslide 在 IonTab 内。我已经尝试在没有标签的情况下直接在页面中插入幻灯片,一切正常。知道为什么标签会破坏幻灯片吗?
ionic-framework - 不同幻灯片中的不同列表同时滚动
我有两张离子幻灯片,每张都包含一个常规列表。我的问题是,每次我滚动其中一个时,另一个同时滚动。
有没有办法让每个列表单独滚动?
我的代码有点像这样:
angular - ion-slide 不适用于 ngFor 指令
[编辑,帖子底部的新信息]
在我的应用程序中,我有几个不同的页面,其中包含一个 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 上。这真的很奇怪。