ionic隐藏tabs的方法

本文为大家分享了ionic隐藏tabs的方法，供大家参考，具体内容如下

1.

 <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}">
<!-- tabs -->
</ion-tabs>

2.
在该控制器下加上.directive：

var module = angular.module('app.directives', []);
module.directive('showTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = false;
    }
  };
}).directive('hideTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = true;
    }
  };
})

3.
 在html页面中引用hide-tabs

<ion-view title="New Entry Form" hide-tabs>
  <!-- view content -->
</ion-tabs>

4.

当页面返回主页面时，需要再次显示tabs，则需要在该控制器中加上(主要是解决android上tabs还是隐藏的问题)：

$scope.$on('$ionicView.enter', function () {
  // 显示 tabs
  $rootScope.hideTabs = false;
});

5. 
我用的是tabs-top，还遇到的一个问题是：<ion-content>的一部分内容会被隐藏；解决办法： 
再次修改directive.js里边的内容，不再使用showTabs：

.directive('hideTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function (scope, element, attributes) {
      scope.$on('$ionicView.beforeEnter', function () {
        scope.$watch(attributes.hideTabs, function (value) {
          $rootScope.hideTabs = value;
        });
      });

      scope.$on('$ionicView.beforeLeave', function () {
        $rootScope.hideTabs = false;
      });
    }
  };
})

来个总结吧，相对于tabs用法，如果是在底部的话，上边的那些不会有什么太大的问题。但如果是用在顶部的话，涉及到content，会遇到一点问题。

其实可以考虑使用ionic上的<ion-slide>来代替<ion-tabs>,不管是与其它页面的滑动效果，还是slide页面的滑动效果都会很大的提升，特别是在android上。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Ionic默认的Tabs模板使用实例

    Ionic默认的Tabs模板使用实例

    Ionic 默认的Tabs 模板  ,Android的在上方,IOS的在下方.在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.pos

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

  • 如何解决IONIC页面底部被遮住无法向上滚动问题

    Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择. ionic 特点 1.ionic 基于Angular语法,简单易学.[3] 2.ionic 是一个轻量级框架. 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代

  • ionic中列表项增加和删除的实现方法

    ionic中列表项增加和删除的实现方法

    在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m

  • ionic组件ion-tabs选项卡切换效果实例

    ionic组件ion-tabs选项卡切换效果实例

    介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板--> <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="

  • 使用JS轻松实现ionic调用键盘搜索功能(超实用)

    这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f

  • ionic隐藏tabs的方法

    本文为大家分享了ionic隐藏tabs的方法,供大家参考,具体内容如下 1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive: var module = angular.module('app.directives', []); module.directive('showTabs', fu

  • jQuery easyui刷新当前tabs的方法

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame_tabs').tabs('update',{ tab:current_tab, options : { content : '<iframe scrolling="auto"

  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

  • js实现鼠标感应向下滑动隐藏菜单的方法

    本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

  • Android编程实现播放视频时切换全屏并隐藏状态栏的方法

    本文实例讲述了Android编程实现播放视频时切换全屏并隐藏状态栏的方法.分享给大家供大家参考,具体如下: 1. Demo示例: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (this.getResources().getConfiguration().ori

  • jQuery bt气泡实现悬停显示及移开隐藏功能的方法

    本文实例讲述了jQuery bt气泡实现悬停显示及移开隐藏功能的方法.分享给大家供大家参考,具体如下: jQuery.bt.options.closeWhenOthersOpen = true; $("img.eq-message").bt({ trigger:["mouseover", "click"], contentSelector:"$(this).next().html()", positions:["le

  • Android 开发隐藏标题栏的方法总结

    android 开发隐藏标题栏的方法总结 1. 推荐!(因为现在工程都默认的为AppTheme) 在value/styles.xml里面添加自定义属性 <resources xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Application theme. --> <style name="AppTheme" parent="AppBaseTh

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • 找出IIS中隐藏网站的方法

    找出IIS中隐藏网站的方法

    打开IIS的管理器->选定一个文件夹->点击鼠标右键->选择"资源管理器",切换到网站的根目录,新建一个文件夹这里取名为"liuqq",接着我们到"x:\windows\system32" (当然这个目录是任意的,其中的x代表系统盘)那里新建一个文件夹取名"liuhack",回到IIS的管理器刷新就会看到,"liuqq"这个目录.选中"liuqq"目录,点击右键->

  • Android ListView中headerview的动态显示和隐藏的实现方法

    Android ListView中headerview的动态显示和隐藏的实现方法 1.动态设置headerview的方法 动态设置headerview有两个思路. 方法一 将header的布局写在list item的布局文件中,在adapter中通过判断position的值是否为0动态控制其显示或隐藏. 代码示例: item.xml布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

随机推荐