ionic 项目的创建的一些常用配置（不断更新中）

来源：互联网发布：java 调用火狐浏览器编辑：程序博客网时间：2024/06/03 20:28

1.将tabs选项卡在底部显示的配置代码：
在app.js加入下面代码即可：

  /**   * 修改导航样式和禁止页面跳转动画   */  .config(['$ionicConfigProvider',function ($ionicConfigProvider) {    // $ionicConfigProvider.platform.ios.tabs.style('standard');    // $ionicConfigProvider.platform.ios.tabs.position('bottom');    $ionicConfigProvider.platform.android.tabs.style('standard');    $ionicConfigProvider.platform.android.tabs.position('bottom');    // $ionicConfigProvider.platform.ios.navBar.alignTitle('center');    $ionicConfigProvider.platform.android.navBar.alignTitle('center');    // $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');    $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-chevron-left');    // $ionicConfigProvider.platform.ios.views.transition('ios');    $ionicConfigProvider.platform.android.views.transition('android');  }])

2.隐藏底部选项卡的配置：
<1>在app.js中创建自定义指令代码：

  /**   * 隐藏底部导航栏   */  .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;        });      }    };  })

2.在需要隐藏的界面的导航栏中使用以上的自定义指令，示例：

<ion-view view-title="隐藏底部选项卡" hide-tabs="true">  <ion-content>  </ion-content></ion-view>

3.有些时候你觉得使用ionic1版本开发时，界面跳转会很卡顿，这时候你可以选择禁用页面的跳转动画，只需要在app.js中的.config中加入下面的代码即可：

 //禁止页面跳转动画 $ionicConfigProvider.views.transition('no');

4.当需要双击点击退出系统时只需要在app.js的.run中加入以下代码：

 /**     * 双击退出     */    $ionicPlatform.registerBackButtonAction(function (e) {      //判断处于哪个页面时双击退出      if ($location.path() == '/login' || $location.path() == '/tab/map') {        if ($rootScope.backButtonPressedOnceToExit) {          ionic.Platform.exitApp();          // cordova.plugins.backgroundMode.moveToBackground();        } else {          $rootScope.backButtonPressedOnceToExit = true;          WGQToast.showShortBottom('再按一次退出系统');          setTimeout(function () {            $rootScope.backButtonPressedOnceToExit = false;          }, 2000);        }      } else if ($ionicHistory.backView()) {        $ionicHistory.goBack();      } else {        $rootScope.backButtonPressedOnceToExit = true;        WGQToast.showShortBottom('再按一次退出系统');        setTimeout(function () {          $rootScope.backButtonPressedOnceToExit = false;        }, 2000);      }      e.preventDefault();      return false;    }, 101);

本地存储、更改、获取，在service.js中添加以下代码，即可使用：

/** * 本地存储、更改、获取 */  .factory('localStorageService', [function () {    var storage = localStorage;    return {      //取      get: function localStorageServiceGet(key, defaultValue) {        var stored = storage.getItem(key);        try {          stored = angular.fromJson(stored);        } catch (error) {          stored = null;        }        if (defaultValue && stored === null) {          stored = defaultValue;        }        return stored;      },      //更新      update: function localStorageServiceUpdate(key, value) {        if (value) {          storage.setItem(key, angular.toJson(value));        }      },      //清空      clear: function localStorageServiceClear(key) {        storage.removeItem(key);      }    };  }])

6.ionic界面复用时，通过$ionicTabsDelegate.selectedIndex()来获取根tabs的索引

作者：ZQH24

阅读全文

0 0