如何使用只有特定页面的离子和分页幻灯片？
如何使用只有特定页面的离子和分页幻灯片？
提问于 2017-10-12 09:24:08
我用离子幻灯片：
https://ionicframework.com/docs/api/components/slides/Slides/
我想使用分页和子弹：
很好，但现在我有了：
- 标题幻灯片
- >此标题的5-6幻灯片。
- 比另一个标题幻灯片
- >此标题的5-6幻灯片。
- 等
我想要的比只有标题页的子弹。
有人知道我怎么能做到这一点吗？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-17 18:53:57
这就是我会做的。基本上，我要像这样定义标题页：
private titleSlides = {
"1": "title",
"5": "title",
"8": "title"
};然后，我编写了这个函数给隐藏项目，不是标题页的：
@ViewChild(Slides) private slides: Slides;
private changePagination () : void {
// get active index
let index = this.slides.getActiveIndex();
// get the pager bullets (maybe need to be selected different, when multiple slides on one page)
let bullets = document.getElementsByClassName('swiper-pagination-bullet');
for (let i = 0; i < bullets.length; i++) {
if (index == 0) {
if (this.titleSlides[i]) {
(bullets[i] as HTMLElement).style.display = 'inline-block';
} else {
(bullets[i] as HTMLElement).style.display = 'none';
}
} else {
(bullets[i] as HTMLElement).style.display = 'none';
}
}
}要调用此函数，可以使用以下生命周期/onChange函数
ionSlideDidChange() {
this.changePagination();
}
ngAfterViewChecked () {
this.changePagination();
}最后，您的html
<ion-slides pager="true" (ionSlideDidChange)="ionSlideDidChange()">
<ion-slide>
Global
</ion-slide>
<ion-slide>
Title
</ion-slide>
<ion-slide>
Slide 1
</ion-slide>
<ion-slide>
Slide 2
</ion-slide>
<ion-slide>
Slide 3
</ion-slide>
<ion-slide>
Title
</ion-slide>
<ion-slide>
Slide 1
</ion-slide>
<ion-slide>
Slide 2
</ion-slide>
<ion-slide>
Title
</ion-slide>
<ion-slide>
Slide 1
</ion-slide>
</ion-slides>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46705954
复制相关文章
相似问题
腾讯云开发者
