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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

RadioButtonList数据项不改变依然执行改变事件

问题:使用RadioButtonList导航到其他页面,当点击一数据项出现新页时候,关闭新页,再点击此数据项,由于数据项没有改变,所以不能触发他的Selecte...

28830
来自专栏余生开发

vue-cli脚手架使用

        components:{App}//注册的组件 名称来自import引入时的名字

13140
来自专栏web前端-

JQuery事件

       focus()                 ------获得焦点事件

17640
来自专栏PHP在线

书写高质量jQuery代码的6条经验

一、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现...

38690
来自专栏Pythonista

Golang之并发篇

12630
来自专栏Youngxj

给源代码和控制台加上线条字

20130
来自专栏ytkah

两个js冲突怎么解决?试试这四个方法

  两个js冲突很让前端头疼,虽然jquery是通用的,但调用不同经常会出问题。jQuery是目前流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览...

60970
来自专栏进击的君君的前端之路

Vue成神之路之全局API

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

14130
来自专栏彭湖湾的编程世界

【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

前言: 之前写过一篇文章《在不同场景下Vue组件间的数据交流》,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sy...

1.2K110
来自专栏DannyHoo的专栏

问题——持续更新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

8720

扫码关注云+社区

领取腾讯云代金券