【技巧】ionic3独享滚动区域之滑动segment
好久没写ionic相关内容，写一篇吧。
想象一下这样一个场景，通过segment切换页面，通过*ngIf等类似指令来模拟显示不同页面的内容，代码表示如下：
<ion-content>
<div *ngIf="vm.selectedSegment == 1">
列表1
</div>
<div *ngIf="vm.selectedSegment == 2">
列表2
</div>
</ion-content>其实这两个列表是公用ion-content的滚动条的，也就是说，当列表1滚动到一定距离，当切换到列表2显示时，列表2已滚动到列表1所在的位置了（效果图我就不上了），鉴于此，我们可以在每个div外面再包一层，此层的滚动区域代替ion-content的滚动区域。在这里，我示范使用ion-slides作为容器层来实现：
html部分：
<ion-header no-border>
<ion-toolbar>
<ion-segment mode="md" [(ngModel)]="vm.selectedSegment">
<ion-segment-button value="s0" (ionSelect)="goToSlide(0)">
标题1
</ion-segment-button>
<ion-segment-button value="s1" (ionSelect)="goToSlide(1)">
标题2
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides centeredSlides="false" zoom="false" (ionSlideDidChange)="onSlideDidChange()">
<ion-slide>
列表1
</ion-slide>
<ion-slide>
列表2
</ion-slide>
</ion-slides>
</ion-content>ts部分：
@ViewChild(Slides) slides: Slides;
vm: any = {
selectedSegment: 's0'
}
constructor(private navCtrl: NavController) {
}
/**
* slide切换处理
*/
onSlideDidChange() {
let index: number = this.slides.getActiveIndex();
if(index >= 0 && index <=2){
//由于索引直接用数字的话，内部方法有的转换为字符串，有的转为整型，避免不必要麻烦，所以用字符串处理
this.vm.selectedSegment = "s" + index;
}
}
/**
* segment点击切换slide滑动
* @param index 索引
*/
goToSlide(index: number) {
if(this.vm.selectedSegment != 's' + index){
this.slides.slideTo(index, 500);
}
}代码应该好懂，原理就两部分：一是选择segment时切换slide，二是slide切换时选择segment，两两互动。
注意：这里的selectedSegment我使用了字符串，而不是理论上应该适用的整型，因为版本问题，整型值赋给ion-segment-button的value时，内部有时把它处理为整型，有时又处理为字符串型，这样双向绑定就对应不上，为免麻烦，故使用字符串值。
此时试着运行可以看到效果，只是此时的效果并不是想要的效果，因为ion-slides是默认居中，且禁用垂直滚动的！此时修改下样式即可：
scss部分：
.swiper-slide{
-webkit-box-align: normal !important;
-webkit-align-items: normal !important;
-ms-flex-align: normal !important;
align-items: normal !important;
.slide-zoom{
overflow-y: auto;
}
}说白了就是添加多个带overflow-y: auto;的切换容器，后来发现在旧版safari中，对flex布局部分不兼容，所以上述样式调整为：
.swiper-slide{
display: block !important;
overflow-y: auto;
}暂时没发现什么问题，待验证……
其实，做一个滑动segment也是一件很简单的事情。
*注意：这里为了演示独享滚动条使用了ion-slides，实际应用上我更喜欢用swiper.js，因为ion-slides总有些奇奇怪怪的情况出现，就像我在【Appetite】ionic3实录（七）次页实现及分析解决问题【上】中说明过一样。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.01.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读