【技巧】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实录（七）次页实现及分析解决问题【上】中说明过一样。