问题标签 [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.

0 投票
1 回答
1340 浏览

reactjs - ion-slides - 幻灯片的动态数量

  • 操作系统:Win10 Pro
  • 离子版本:CLI 6.6.0
  • 节点版本:v14.0.0

我正在使用IonSlides组件,并且遇到了以下问题
我有一个日期数组,并且必须IonSlide为每个日期创建一个组件。用户可以重新安排开始和结束日期。如果日期数组的长度与之前的长度不同,则布局中断。
我设法让它手动调用Swiper API,并通过这种解决方法正确显示幻灯片。

目前,MacOS 上的一位同事遇到了以下错误消息,我在 Windows 上没有(相同的 Ionic 和 Node 版本):

此外,在调用swiper.removeAllSlides();和重建幻灯片后,滚动条丢失了。任何人都有提示,我该如何改进它?

Slides.tsx(在Slide我使用组件的IonSlide组件内部)

0 投票
2 回答
378 浏览

reactjs - 离子幻灯片反应内容都在一条线上

我正在尝试使用多张幻灯片创建视图。但是,同一张幻灯片上的组件仅在一行上呈现,而不是按钮上方的标题。有人可以帮我解决这个问题吗?我的幻灯片代码是:

我得到的显示是:

在此处输入图像描述

0 投票
2 回答
2152 浏览

typescript - 最后一张幻灯片未调用 Ionic 5 Slides ionSlideDidChange

我目前正在使用离子幻灯片(在 Ionic 5 中)并且在获取最后一张幻灯片的选定幻灯片索引时遇到问题。这个问题发生在我设置slidesPerView为 1.3 之后。

ionSlideDidChange当我尝试滑到最后一张幻灯片时,甚至事件都不会被触发(当我滑到其他幻灯片时,事件触发得很好。)

我认为 Ionic 方面存在问题,因为如果我在最后一张幻灯片上,getActiveIndex 也无法正常工作(尽管它返回最后一张幻灯片索引)

有没有人遇到过这个问题?

0 投票
1 回答
333 浏览

css - 使用 Ionic 3 在离子幻灯片内水平滚动

在下图中,我有两个 Div,每个 Div 都在一个 ion-slide 内,它们水平移动,因为它们在 ion-slide 组件中(DivA 和 DivB)

在此处输入图像描述

在 DivA(蓝色)内部,如下图所示,我有一个 Div (DIV-SCROLL)(红色),它也应该有一个水平滚动。但是,当尝试在 DIV-SCROLL 上滚动时,离子滑块会将整个 DivA(蓝色)移动到左侧。

在此处输入图像描述

我该怎么做才能使 Div DIV-SCROLL 有自己的水平滚动?

0 投票
1 回答
379 浏览

ionic-framework - Ionic 5 离子载玻片作为“虚拟载玻片”

我正在使用Ionic Framework v5 和基于Swiper.js的ion-slides ,它具有一个属性,可以根据您在项目列表中的位置智能地从 DOM 加载和卸载数据。virtual

我找不到任何关于如何在 Ionic 中实现它的信息。任何指针将不胜感激。谢谢你。

0 投票
1 回答
134 浏览

angular - 更改离子幻灯片时如何触发脚本?

我正在用 Ionic & Angular 编写一个应用程序。我正在使用 ion-slides 组件,我想启动一个脚本来重新计算每次更换幻灯片时的全部金额......你能向我解释一下怎么做吗?有通用事件吗?感谢您到目前为止的阅读。

0 投票
1 回答
828 浏览

javascript - 离子滑块固定在离子含量的底部

我将离子滑块固定在离子内容的顶部我试图将其固定在底部并始终继续滑动,在页面的第一次加载时滑块会自动滑动但是如果我打开另一个页面并返回到同一页面滑块停止。

在打字稿文件中,我让它在slidesDidLoad上自动滑动

0 投票
0 回答
673 浏览

ionic-framework - 使用 ion-slides 在 Ionic 5 中设置图像宽度

我正在使用 Ionic 5 和ion-slides做一个应用程序。

我正在尝试将图像宽度设置为 100%,以便能够更好地看到它们。现在的图像左右两边都有空间,我不知道如何删除它。

在此处输入图像描述

我努力了:

另外,我尝试将 img 包装在 div 中:

但是,左右还有空间。

在此处输入图像描述

我的任何尝试似乎都不起作用。

我的目标是将图像宽度设置为 100% 并保持图像质量。

0 投票
0 回答
156 浏览

image - 从 Ionic 5 中的 ion-slide 保存的裁剪图像

我的 Ionic 5 应用程序需要以 1:1 的比例保存上传的照片,目前,我发现裁剪照片的最佳界面是 Instagram 的做法。我已经div使用ion-slide.

到此为止,看照片还是不错的。现在我必须保存照片,包括ion-slides区域内可见的背景。有像html2canvas这样的解决方案可以做到这一点,但我想了解是否有任何挑战

  • 照片质量会变差
  • 基于手机屏幕分辨率的图像质量

请让我知道是否有好的解决方案。

0 投票
1 回答
216 浏览

ionic-framework - Ionic v5 - 离子幻灯片如何改变分页位置

我需要帮助!

我正在尝试更改 ion-slide 分页的位置。我知道我可以更改为 .swiper-pagination 类。但是,我只能将 .swiper-pagination 放在 global.css 中。但这带来了一个很大的问题,其他页面上的所有幻灯片都继承了这个配置,我只想在一个页面上更改它。

如何设置组件的 css 页面的 .swiper-pagination?