Ionic学习日记8：类android原生滑动标签效果

2019年5月13日 239次阅读 来源: SWKende

前言

想要实现有tabs标签，但是不用点击，在content内容部分左右滑动就可以跳转到相关的tab页面，上周我根据官方的文档使用<ion-slides>来做其实也是可以的，就是一个问题没有解决一个居中问题，使用slides包裹的其他页面，那么其他页面里面的内容会被强制居中，于是放弃了使用slides实现滑动标签，（有原图的，结果发现那一次的代码删掉了，有空我会重新贴上上次使用slides实现的效果），有兴趣的可以探讨解决一下如何使用slides完美实现。
于是这次在同组成员的努力下，完成了效果的实现。非常感谢原博主提供的博客供大家学习，本日记是参考原博主完成此功能的
http://blog.csdn.net/u010730897/article/details/53467051

思路

ionic其实提供了滑动事件的触发，使用HammerJS可以通过event的direction来判断具体是哪个
《Ionic学习日记8：类android原生滑动标签效果》 对应的value

使用这个对应关系就可以来做判断他是具体左划还是右划了，这次这次涉及的页面有homepage和menupagePage

home.html

<ion-content (swipe)="swipeEvnet($event)">
  <div [ngSwitch]="testSegment">
    <div *ngSwitchCase="'菜单一'">
      <page-menupage></page-menupage>
    </div>
    <div *ngSwitchCase="'菜单二'">
      菜单二
    </div>
    <div *ngSwitchCase="'菜单三'">
      菜单三
    </div>
    <div *ngSwitchCase="'菜单四'">
      菜单四
    </div>
  </div>
</ion-content>

在这里还是选择了在content中添加滑动事件，一旦有滑动将触发swipeEvnet函数,ngSwitch和ngSwitchCase之后再解释。这里只在第一个div中导入了页面元素，其他3个都是测试，当然也可以导入

home.ts

export class HomePage {

  testArray: string[] = ['菜单一', '菜单二', '菜单三', '菜单四'];
  testSegment: string = this.testArray[0];

  constructor(public navCtrl: NavController) {
  }

  swipeEvnet(event) {
    //向左滑
    if (event.direction == 2) {
      if (this.testArray.indexOf(this.testSegment) < 3) {
        this.testSegment = this.testArray[this.testArray.indexOf(this.testSegment) + 1];
      }
    }
    //向右滑
    if (event.direction == 4) {
      if (this.testArray.indexOf(this.testSegment) > 0) {
        this.testSegment = this.testArray[this.testArray.indexOf(this.testSegment) - 1];
      }
    }
  }
}

设置了数组保存菜单（默认有4个菜单页），再设置testSegment用来计数，当滑动触发后，将会跳转到testSegment指向的页面，这时候需要html那获取滑动到的是哪一个页面，使用*ngSwitchCase将当前的页面赋值给testSegment，在滑动时滑动判断的值返还给函数做判断操作

注意

还需要将menupagePage的<ion-header>和<ion-content>标签删掉，只留下content将会显示的内容，不然会出现
《Ionic学习日记8：类android原生滑动标签效果》 效果

取消掉<ion-header>和<ion-content>后效果：

《Ionic学习日记8：类android原生滑动标签效果》 效果

后言

这个项目暂时还没在我手机上运行试试情况，因为我遇到一个无法解决的问题，手机连接电脑突然就不能被电脑识别， 所以所有的效果都是在浏览器上看的，如果真机运行有问题的话可以提出来，我会做出相关的更正

    原文作者：SWKende
    原文地址: https://www.jianshu.com/p/046f4c908ed4
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞