扫过段标签 - Ionic 3 [英] Swipe through segment tabs - Ionic 3
本文介绍了扫过段标签 - Ionic 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面的代码使用了 ionic 3 中的片段.文档显示了 ngSwitch、ngModel 的使用.但我想简单地在细分上滑动并切换到另一个细分选项卡.我怎样才能做到这一点?
我对滑动顶部的选项卡不感兴趣,但通过滑动内容我想更改分段选项卡.
<离子内容填充><离子段[(ngModel)]="abc"><ion-segment-button value="Segment1">段标题</离子段按钮><ion-segment-button value="segment2">段标题</离子段按钮></离子段></div><div [ngSwitch]="abc"><ion-list *ngSwitchCase="'segment2'" class="list-fixed"><离子项目><ion-thumbnail item-start><img src="assets/imgs/1.jpg"></离子缩略图><h2>列表项 1</h2><p>列表项副标题</p><button ion-button clear item-end>查看</button></离子项目></离子列表><ion-list *ngSwitchCase="'segment1'" class="list-fixed"><离子项目><ion-thumbnail item-start><img src="assets/imgs/3.png"></离子缩略图><h2>列表项标题 1</h2><p>副标题</p><button ion-button clear item-end>查看</button></离子项目></离子列表></div> 解决方案 我的解决方案是添加:
.html 文件
//在您想检测用户输入的滑动的地方添加以下代码//当用户进行滑动时,只需检查并在选项卡之间进行切换.(pan)='swipeEvent($event)'
.ts 文件
pages: string = "pageA";滑动事件($e){控制台.log($e.deltaX+", "+$e.deltaY);如果($e.deltaX > 0){console.log("从左向右滑动");this.pages = "pageB";}别的{console.log("从右向左滑动");this.pages = "pageA";}}
感谢大卫的评论
The code below uses segments from ionic 3. docs show the use of ngSwitch, ngModel. but I would like to simply swipe on the segment and switch to another segment tab. How can I achieve this?
I am not interested in swiping the tabs at the top but by swiping on the content i would like to change the segment tab.
<ion-content padding>
<div>
<ion-segment [(ngModel)]="abc">
<ion-segment-button value="Segment1">
Segment Title
</ion-segment-button>
<ion-segment-button value="segment2">
Segment Title
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="abc">
<ion-list *ngSwitchCase="'segment2'" class="list-fixed">
<ion-item>
<ion-thumbnail item-start>
<img src="assets/imgs/1.jpg">
</ion-thumbnail>
<h2>List Item 1</h2>
<p>List Item Subtitle</p>
<button ion-button clear item-end>View</button>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'segment1'" class="list-fixed">
<ion-item>
<ion-thumbnail item-start>
<img src="assets/imgs/3.png">
</ion-thumbnail>
<h2>List Item Title 1</h2>
<p>Subheading</p>
<button ion-button clear item-end>View</button>
</ion-item>
</ion-list>
</div>
解决方案 My Solution was to Add :
.html file
//Add below code where you would like to detect the swipe from users input
// When user makes a swipe simply check and do the switch between Tabs.
(pan)='swipeEvent($event)'
.ts file
pages: string = "pageA";
swipeEvent($e) {
console.log($e.deltaX+", "+$e.deltaY);
if($e.deltaX > 0){
console.log("Swipe from Left to Right");
this.pages = "pageB";
}else{
console.log("Swipe from Right to Left");
this.pages = "pageA";
}
}
Thanks to David's Comment
这篇关于扫过段标签 - Ionic 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文