问题标签 [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 投票
0 回答
73 浏览

ionic4 - 离子滑动橡皮筋效果在模态中不起作用

我正在使用带有离子芯片的离子载玻片组件来制作类别(例如,YouTube 在主屏幕上用于快速搜索的所有、喜剧等)。

当我以模态打开时,该组件工作正常,但没有橡皮筋效果,所以我希望用户只滚动到模态中的第一个和最后一个芯片。但在模态芯片中滚动不停。

#ionSlidesComponentWithChips

我在模态中添加了组件。

为了更好地理解我刚刚上传视频的问题:请点击这里

0 投票
1 回答
1087 浏览

typescript - 循环中的多个离子载玻片无法在载玻片上提供正确的索引

在我的 Ionic 5 应用程序中,我必须通过 ion-slides 水平显示我的自定义组件,并在循环中垂直重复每个滑块。

在代码中。

以下方法获取活动幻灯片编号

我的目标是为每个索引获取正确的活动幻灯片编号。滑块工作正常,activeSlideNumber每次只有第一个(索引 0)滑块的值都是正确的。对于除第一个滑块之外的所有滑块,其值activeSlideNumber始终是第一个(索引 0)滑块更改的最后一个值。因此,如果我将第一个(索引 0)滑块滑动 3 次,activeSlideNumber索引 0 的值为 2。对于所有其他滑块,它将始终为 2。

0 投票
0 回答
107 浏览

ionic-framework - 无法使用 slideNext 和 slideTo 在 ionic5 应用程序中手动更改幻灯片

我构建了一个 ionic5 应用程序,该应用程序利用循环添加离子幻灯片,其内容是不同的无线电组,其内容是从数组中提取的。我的问题是当我尝试使用 slideNext 或 slideTo 切换幻灯片时,它无法工作。我只能在刷新浏览器后才能让它工作,而在我构建一个 android 应用程序并测试时根本不工作。

我正在尝试的代码是:

和 .ts 代码:

不确定它是否相关,但我使用的离子环境是:

更新 我曾尝试使用滑动,我意识到(如使用按钮事件的情况)幻灯片更改仅在页面刷新后才有效。我已尝试降级到 ionic4,但问题仍然存在

0 投票
1 回答
904 浏览

reactjs - 如何结合 Ionic Segment 和 Slide 使用 Ionic-React 制作可滑动的标签?

我是 Ionic 新手,在我的 Ionic-React 应用程序中结合 IonSegment 和 IonSlides 时遇到问题。互联网上的资源并不多,尤其是使用 Ionic 和 React。如何获取幻灯片内容的索引(在本例中为 Card 组件),这也会将内容更改为下一个片段(从 Market 到 My Package,反之亦然)。或者有没有更好的方法来实现这一点?这是下面的代码。

0 投票
0 回答
120 浏览

asynchronous - 离子幻灯片不适用于等待/异步

我正在使用 Ionic 的幻灯片组件(基于 Swiper),效果很好。但是,我有一个特定的用例,我需要根据异步调用设置滑块的 spaceBetween 选项。

我尝试使用 .update() 方法,但没有任何效果。

我究竟做错了什么?

0 投票
1 回答
209 浏览

forms - 如何在移动到下一张幻灯片之前验证离子幻灯片中的表单?

我正在构建一个离子应用程序,其中包含 4 张幻灯片,每张幻灯片中都有表格,使用 slideNext() 移动到下一张幻灯片。有没有一种方法可以在移动到下一张幻灯片之前验证每个幻灯片表单?在提交所有表单数据之前,我会尝试使用“if”语句来检查最后一张幻灯片的有效性,但有些表单需要用户从早期幻灯片中输入,因此需要在幻灯片更改时验证表单。我怎样才能做到这一点?

0 投票
1 回答
213 浏览

ionic-framework - 在离子滑块中获取 getActiveIndex 错误

我只有 5 张图片及以下配置

现在当我滑动选择幻灯片值时

HTML

this.currentIndex是错误的,我有时会得到 12、11、9、7,而循环中只有 5 张图像

在此处输入图像描述

0 投票
3 回答
26523 浏览

javascript - 执行调度程序刷新期间未处理的错误。这可能是一个 Vue 内部错误

在 Vue.js 中创建幻灯片时出现以下错误:

如果我添加硬编码的幻灯片,它不会显示任何错误。但是,如果我使用v-for循环动态添加幻灯片,则会显示上述错误。

我通过以下方式添加了幻灯片:

这是模板:

这是脚本:

我在代码中做错了什么?

0 投票
1 回答
29 浏览

ionic-framework - 如果页面(演练)已被查看一次,如何更改应用程序路由路径

我有使用 ion-slides 构建的应用程序演练/介绍,它被加载为 app.routing.module.ts 中的默认页面。

我只想在应用程序第一次启动时显示这个,所以我的问题是如何在应用程序路由模块中配置应用程序路由以设置一次打开页面?我阅读了文档,但找不到参考。

0 投票
1 回答
165 浏览

angular - 使用离子幻灯片显示电影数组

我正在使用一个应用程序,我想使用 ion-slide 组件显示一系列电影。我想像 Netflix 应用一样展示电影,这样电影都在同一行,用户可以水平滚动。使用 ions-lider 已经成功了,但是它的样式根本不起作用。电影图像由外部 API 提供,大小不一,但高度和比例相同。问题是:

  • 电影图像的高度不同。
  • 它们彼此太近以至于彼此重叠。

我尝试使用自定义 scss 规则而不是默认的 ion-img 组件样式规则,但结果更糟。现在我默认拥有它,似乎唯一的问题是滑块配置。

我拥有它的方式是,对于电影数组,我创建了一个离子幻灯片,并且在数组中的每个电影都有一个迭代,我称之为绑定电影对象的组件,该组件渲染电影图像和电影标题。

我这样做的方式如下:

  1. 我有一个数组,其中该数组上的每个元素都是一个对象,该对象包含一个电影集合,该集合具有该集合的名称、该集合所有者的 id 和一个 id 电影数组。
  2. 对于数组的每个元素,我调用一个名为collection该组件的组件获取一个集合并呈现集合的标题并遍历电影 id,从 API 中检索有关电影的完整信息。
  3. 在集合组件中,当我检索到所有电影信息时,我使用一个名为movie-poster渲染电影图像和电影标题的组件渲染电影图像和标题。

这是我渲染所有集合的地方:

这是集合组件:

和离子幻灯片配置:

以及电影海报组件:

我使用的任何组件都没有任何 scss 规则。这就是我试图展示我的电影的内容:

在此处输入图像描述

这就是它现在的显示方式:

在此处输入图像描述 在此处输入图像描述