2018/2/2 19:00:23当前位置推荐好文程序员浏览文章

前言

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

思路

ionic其实提供了滑动事件的触发,使用HammerJS可以通过event的direction来判断具体是哪个对应的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将会显示的内容,不然会出现效果

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


效果

后言

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

网友评论