问题标签 [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.
ionic-framework - 当我滑动时,slideChangeStart 事件不会触发
在我的 Ionic 1.3.1 应用程序中,我使用该ion-slides
组件来显示问卷的各个部分:
在我的控制器中,我监听 slideChangeStart:
当我单击调用slider.slidePrev()
或的上一个和下一个按钮时,slider.slideNext()
该slideChangeStart
事件会触发 - 我会看到警报。但是,如果我使用手势滑动页面 - 标题会按预期更改,但事件不会触发。我试过在我的选项中关闭滑动但没有成功(反正不是我的首选解决方案):
更新
我尝试使用slideChangeEnd
,但该事件也没有触发。因此,我将所有代码移到了我从,和方法gotoSlide(index)
调用的单个方法中- 这样我就不会依赖 ion-slides 事件。我在我的 ion-slide-page 组件中添加了 Ionic on-swipe 指令,看看它们是否可以工作:next
previous
pagerClick
这使得在 Ripple 模拟器中滑动工作(以前根本不工作),但它仍然不能在我的任何 android 设备上工作。同样,滑动事件似乎没有触发。
我正在使用人行横道插件
ionic-framework - 离子滑块通过 ng-repeat 以起点为参数
我有一个带有 ng-repeat(循环)的滑块。我希望它根据用户输入(从上一个视图)显示第一个滑块。
例如,如果用户选择“蔬菜”,那么第一张幻灯片将显示番茄,如果用户选择“水果”,则滑块将从带有苹果的幻灯片开始。但滑块应始终包含所有蔬菜和水果。
var items = [
// veges
{
family: 'vege',
name: 'tomato'
},
{
family: 'vege',
name: 'potato',
},
// fruits
{
family: 'fruits',
name: 'apple'
},
{
family: 'fruits',
name: 'banana',
}];
任何想法如何做到这一点?
angularjs - ion-slides 未显示在 ion-content 和 div 内部
我是 iOS 原生应用程序开发中 Ionic 框架(混合应用程序开发)的新手。我必须设计一个屏幕,它应该有两个像“ Recent and All
”这样的按钮。如果我们点击“最近”,最近的项目应该显示在列表中,如果我们点击“全部”,它应该显示列表中的所有项目。我试图使用“ ion-slides
”控件来使用两个不同的列表。我已经在“”内的 html 页面中实现了离子幻灯片ion-view
,它与两个按钮重叠(最近,所有按钮都重叠且不可点击)。如果我添加 " ion-slides" in "ion-content" or "div", the slides are not in visible
。另外,如果我单击 "Recent" 按钮需要显示第一张幻灯片,我需要根据按钮操作更改幻灯片。我已经实现了 " ionicSlideBoxDelegate
" 但是,它不起作用。我该如何解决这个问题?你能帮忙吗?
能够看到日志“单击下一个按钮”,但是该操作未执行。
ios - 在 ion-slides 离子组件上显示寻呼机点
我正在尝试在 ionic 2 应用程序的页面内创建一个滑块组件。我已经让它按预期工作,但寻呼机点没有出现。关于如何使用寻呼机的文档不是很好。有什么想法我在这里出错了吗?
我也尝试过<ion-slides options="{pagination: true}">
,<ion-slides pager="true">
但这些都没有奏效。
编辑:在浏览器中检查后,我看到寻呼机正在使用这样的 div 容器呈现:
<div class="swiper-pager hide">
所以我绝对没有使用正确的参数来取消隐藏寻呼机。或者有一个错误。我正在使用 Ionic v2.0.0。
javascript - Swiper 滑块 - 为不同尺寸的屏幕设置响应式图像
我有一个ionic app
,并且我使用 ion-slides 指令,该指令使用 swiper 滑块,用于图像滑块。这是它在视图中的外观:
这是它的CSS:
问题是如果不给slides
类指定任何高度或将其设置为100%
or auto
,则图像不可见,因为未设置高度。当我确实为 设置了高度时slides
,它们无法正确调整大小,因为设置了高度,并且图像水平拉伸然后在更大的屏幕上。我该如何解决?
ionic-framework - 离子幻灯片 slidesPerView 属性
我使用离子幻灯片如下:
我收到以下错误:
未处理的承诺拒绝:模板解析错误:无法绑定到“slidesPerView”,因为它不是“离子幻灯片”的已知属性。
- 如果 'ion-slides' 是一个 Angular 组件并且它有 'slidesPerView' 输入,那么验证它是这个模块的一部分。
- 如果“ion-slides”是一个 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。("h6 class="slide-title" [innerHTML]="category.name"> ][slidesPerView]="3">
<img [src]="product"): MainPage@12:43 ; 区域:; 任务:Promise.then;价值: ....
任何人都可以帮忙吗?
离子-v 2.2.1
科尔多瓦-v 6.5.0
typescript - “离子幻灯片”选项“已被弃用”,现在怎么办?
我正在尝试实现Ionic2 的 Slides,但我找不到如何设置设置:
离子幻灯片“选项”已被弃用。请改用 ion-slide 的输入属性。
我可以找到“输入属性”(例如自动播放、速度、方向),但我不知道在哪里放置它。我发现的每个示例都[options]="slideOptions"
在哪里slideOptions
设置,但这不会导致除弃用通知之外的任何结果。
我是 ionic v2 和 typescript 的新手,我可能会得到一个 hacky 解决方案来工作,但我想把它做好。
中的 HTML ion-content
:
和简化类: import { Slides } from 'ionic-angular';
ionic2 - 离子幻灯片循环技巧 - 不更新
我正在尝试在 ionic2 中实现以下“技巧”: - 我将一张幻灯片设置为循环播放。- 滑动幻灯片时,我增加或减少一个变量 - 该变量将导致不同的数据显示在幻灯片中。
这样我就可以获得幻灯片组件的完整 UI 体验,而无需硬编码或预加载所有其他幻灯片。例如,假设您每天查看数据,我希望能够来回滑动查看前几天的数据。鉴于更改,我将重新加载相关日期数据。
它几乎可以工作,只是循环时滑块似乎没有正确刷新。看看这个 http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview
控制器
如果你来回滑动,文本不会改变。它应该增加或减少,例如幻灯片 1、幻灯片 2 等...但是做几次滑动而不是滑动,只需单击幻灯片并稍微移动它,然后标签会刷新以提供正确的值!几乎就像是因为我在循环播放 - 所有显示的是原始幻灯片值而不是更新值,直到我单击幻灯片上的某个位置导致它刷新。
所以底线我认为这是一个错误?有什么办法可以以编程方式触发这种“刷新”行为?
谢谢
ionic2 - 或幻灯片,如何在 ionic2 中隐藏分页
好吧,我想隐藏分页。如下所示。
我pager
从<ion-slides>
html中删除。我想通过代码控制分页的显示状态。当代码this.slides.pager=true
执行时,分页仍然无法显示。