zoukankan      html  css  js  c++  java
  • ionic实现用手势左右滑动控制底部tab的切换

     

    html代码片段:

    1.<ion-tabs class="tabs-icon-top tabs-color-active-positive" id="eventPlaceholder">

    在 ion-tabs 上设置一个id

    2.然后在该控制器中注入需要的服务:
    $ionicGesture,$ionicTabsDelegate

    3.js部分:
    //手势
    var element1 = angular.element(document.querySelector('#eventPlaceholder'));

    //左滑动
    $ionicGesture.on('dragleft',function(){
    var selectedIndex1 = $ionicTabsDelegate.selectedIndex();
    if(selectedIndex1 == 0){
    $state.go('tab.sort');
    }else if(selectedIndex1 == 1){
    $state.go('tab.count');
    }else if(selectedIndex1 == 2){
    $state.go('tab.mine');
    }else if(selectedIndex1 == 3){
    $state.go('tab.mine');
    }

    },element1)

    //右滑动
    $ionicGesture.on('dragright',function(){
       var selectedIndex2 = $ionicTabsDelegate.selectedIndex();
    if(selectedIndex2 == 3){
    $state.go('tab.count');
    }else if(selectedIndex2 == 2){
    $state.go('tab.sort');
    }else if(selectedIndex2 == 1){
    $state.go('tab.home');
    }else if(selectedIndex2 == 0){
    $state.go('tab.home');
    }
    },element1)





  • 相关阅读:
    CALayer3-层的属性
    CALayer2-创建新的层
    CALayer1-简介
    autofac 使用
    .net5的异步
    动态添加菜单
    PDF解析帮助类
    正则获取字符串中两个字符串间的内容
    水晶报表
    通用easyui查询页面组件
  • 原文地址:https://www.cnblogs.com/maochunyan/p/6892581.html
Copyright © 2011-2022 走看看