离子 - 如何滑动离子段? [英] Ionic - how to slide ion-segments?
本文介绍了离子 - 如何滑动离子段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何像离子中的许多应用一样滑动切换片段?我在离子官方文档中找不到任何api。我只能找到这个有用的帖子。
How can I slide to switch segment like many apps in ionic? I can't find any api in ionic official documentation. I can only find this useful thread.
但它看起来并不完美。有没有更好的解决方案?
But it does notseem perfect. Is there some better solution?
离子信息:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.10.2
Xcode version: Not installed
推荐答案
简单易行,无需JS自定义代码。你可以实现离子幻灯片和离子段,听取1个变量说段
simple and easy, no need JS custom code. you can implement ion-slides and ion-segment that listen to 1 variable say segment
工具栏:绑定到段,并听取ionChange
Toolbar: bind to segment, and listen ionChange
<ion-toolbar>
<ion-segment (ionChange)="slides.slideTo(segment)" [(ngModel)]="segment" color="warning">
<ion-segment-button value="0">
<ion-icon name="person"></ion-icon>
</ion-segment-button>
<ion-segment-button value="1">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
ion-slides:
捕获幻灯片事件,将段分配给当前活动索引
ion-slides: capture the slide event, assign segment to current active index
<ion-slides #slides (ionSlideWillChange)="segment=''+slides.getActiveIndex()">
<ion-slide>
profile,
hello <span *ngIf="this.userProvider.userData">{{this.userProvider.userData.name}}</span>
</ion-slide>
<ion-slide>
second
</ion-slide>
<ion-slide>
third
</ion-slide>
</ion-slides>
这篇关于离子 - 如何滑动离子段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文