ionic之app.js中的路由配置关系和导航居底部的解决方案

最新推荐文章于 2023-05-19 07:43:35 发布
最新推荐文章于 2023-05-19 07:43:35 发布
阅读量1.5k 收藏
点赞数
分类专栏： ionic 文章标签： ionic 手机 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/badgirl_hong/article/details/53113219
版权
本文介绍了一个Ionic应用中导航配置的问题，特别是在手机端调试时导航位置的变化。通过AngularJS模块化配置，实现了不同平台下导航栏和标签的位置调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 工作中遇到一个问题，用谷歌浏览器的手机端调试界面时，导航是位于底部的，用自己的手机调试时，导航却在顶部标题下面，并没有居于底部，在调页面的时候带了很多麻烦。
  • 路由之间的配置关系，详情待补充......  
        


var profile = angular.module('profile',[]);
var cbill = angular.module('cbill',[]);
var cproduct = angular.module('cproduct',[]);
var csowing = angular.module('csowing',[]);
var clesunClound = angular.module('clesunClound', ['ionic', "ngCookies", "ngFileUpload","cproduct","cbill","csowing","profile"])
  .config(function ($stateProvider, $urlRouterProvider, $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-android-arrow-back');
    $ionicConfigProvider.platform.ios.views.transition('ios');
    $ionicConfigProvider.platform.android.views.transition('android');
    $urlRouterProvider.otherwise('/login');
    $stateProvider.state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html',//农事，产品，活动，我的导航
      controller: "navCtrl"
    })
    //1. 定植列表-首页
      .state('tab.csowingList', {
        url: '/csowingList',
        views: {
          'tabCsowingList': {
            templateUrl: 'templates/csowing/csowingList.html',//定植列表—首页
            controller: 'csowingListCtrl'
          }
        }
      })
      //2. 农事列表 -- 从定植列表跳转
      .state('tab.csowingCproduceList', {
        url: '/csowingList/:sowingid',
        views: {
          'tabCsowingList': {
            templateUrl: 'templates/csowing/csowingCproduceList.html',//定植列表-》农事列表界面
            controller: 'csowingCproduceListCtrl'
          }
        }
      })
      //3. 农事详情--从农事列表跳转
      .state('tab.csowingCproduceDetail', {
        url: '/csowingList/:sowingid',
        views: {
          'tabCsowingList': {
            templateUrl: 'templates/csowing/csowingCproduceDetail.html',//农事列表-》农事详情界面
            controller: 'csowingDetailCtrl'
          }
        }
      })
      //4. 新增定植
      .state('tab.csowingPublish', {
        url: '/csowingList/:sowingid',
        views: {
          'tabCsowingList': {
            templateUrl: 'templates/csowing/csowingPublish.html' //农事—定植列表—新增定植界面
            //controller: 'csowingPublishCtrl'
          }
        }
      })
      //5. 新增农事
      .state('tab.csowingCproducePublish', {
        url: '/csowingList/:sowingid',
        views: {
          'tabCsowingList': {
            templateUrl: 'templates/csowing/csowingCproducePublish.html' //农事—定植列表—新增农事界面
            //controller: 'csowingPublishCtrl'
          }
        }
      })
      .state('tab.cproductList', {
        url: '/cproductList',
        views: {
          'tabCproductList': {
            templateUrl: 'templates/cproduct/ctabProductList.html',//产品—产品列表首页
            controller: 'cproductListCtrl'
          }
        }
      })
      .state('tab.cproductDetail', {
        url: '/cproductDetail',
        views: {
          'tabCproductList': {
            templateUrl: 'templates/cproduct/cproductDetail.html',    //产品—产品详情界面
            controller: 'cproductDetailCtrl'
          }
        }
      })
      .state('tab.cproductPublish', {
        url: '/cproductPublish',
        views: {
          'tabCproductList': {
            templateUrl: 'templates/cproduct/cproductPublish.html',//产品—发布产品界面
            controller: 'cproductPublishCtrl'
          }
        }
      })
      .state('tab.cbillList', {
        url: '/cbillList',
        views: {
          'tabCbillList': {
            templateUrl: 'templates/cbill/ctabBillList.html',//活动—活动列表首页
            controller: 'cbillListCtrl'
          }
        }
      })
      .state('tab.cbillListDetail', {
        url: '/cbillList/:billId',
        views: {
          'tabCbillList': {
            templateUrl: 'templates/cbill/cbillDetail.html',//活动—活动列表—活动列表详情界面
            controller: 'cbillDetailCtrl'
          }
        }
      })
      .state('tab.cbillPublish', {
        url: '/cbillPublish',
        views: {
          'tabCbillList': {
            templateUrl: 'templates/cbill/cbillPublish.html', //活动-活动列表-发布活动界面
            controller: 'cbillPublishCtrl'
          }
        }
      })
      .state('tab.profile', {
        url: '/profile',
        views: {
          'tabProfile': {
            templateUrl: 'templates/profile/tabProfile.html',//我的—我的农事档案首页
            controller: 'profileCtrl'
          }
        }
      })
      .state('tab.profileCaccountDetail', {
        url: '/profileCaccountDetail',
        views: {
          'tabProfile': {
            templateUrl: 'templates/profile/profileCaccountDetail.html',//我的—我的农事档案详情—农场基本资料界面
            controller: 'caccountCtrl'
          }
        }
      })
      .state('tab.profileCqrCode', {
        url: '/profileCqrCode',
        views: {
          'tabProfile': {
            templateUrl: 'templates/profile/profileCqrCode.html',//我的—我的农事档案—二维码管理
            controller: 'qrcodeListCtrl'
          }
        }
      })
      .state('tab.profileCfarmEquipment', {
        url: '/profileCfarmEquipment',
        views: {
          'tabProfile': {
            templateUrl: 'templates/profile/profileCfarmEquipment.html'//我的—我的农事档案—农场设备
          }
        }
      })
      .state('tab.profileCsuggestionBack', {
        url: '/profileCsuggestionBack',
        views: {
          'tabProfile': {
            templateUrl: 'templates/profile/profileCsuggestionBack.html',//我的—我的农事档案—意见反馈
            controller: 'csuggestionBackCtrl'
          }
        }
      })
      .state("login", {
        url: "/login",
        templateUrl: "templates/common/login.html",
        controller: "loginCtrl"
      });
  })
  .run(function ($window,$ionicPlatform, $rootScope, $state, $stateParams, appService, userService, locationService, cacheService) {
    $ionicPlatform.ready(function () {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
      $rootScope.USERINFO = {};
      //获取usertoken
      userService.getUserToken();
      $rootScope.$watch("USERTOKEN", function (data) {
        // 获取资源对象
        if (data) {
          appService.initApp(["CUSER", "CQUOTATIONBILL", "CORDERDETAIL", "CPRODUCT",
            "CCATALOG", "CPRODUCE", "VCPRODUCT", "CARTICLE", "CNEWS", "CACTIVITY",
            "CASSETS", "CLOC", "CCERT", "CPRODUCT", "VCBANNER", "CACCOUNT", "VCACCOUNT",
            "CUSERINTEREST", "CUSERVOTE", "CUSERCOMMENT", "CMESSAGE", "CTELSMS", "CFEEDBACK",
            "CVERSION", "CROLEUSER", "CROLEAUTH", "CROLE", "CINTEGRALRULES",
            "CINTEGRALDETAIL", "CSESSION"]);
        }
      });
      //默认获取当前为在的经纬度
      locationService.doGetLocation().then(function (res) {
        if (res.status == '1') {
          //{"status":"1","info":"OK","infocode":"10000","province":"北京市","city":"北京市","adcode":"110000","rectangle":"116.0119343,39.66127144;116.7829835,40.2164962"}
          cacheService.setSObject("LOCATION", res);
          var latlng = res.rectangle.split(";");
          var lng11 = latlng[0].split(",");
          var lat11 = latlng[1].split(",");
          var lng = (parseFloat(lng11[0]) + parseFloat(lat11[0])) / 2;
          var lat = (parseFloat(lng11[1]) + parseFloat(lat11[1])) / 2;
          cacheService.setS("LNG", lng);
          cacheService.setS("LAT", lat);
        } else {
          if ($window.navigator.geolocation) {
            var options = {
              enableHighAccuracy: true
            };
            $window.navigator.geolocation.getCurrentPosition(function (position) {
              // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度
              var LNG = position.coords.longitude;
              var LAT = position.coords.latitude;
              cacheService.setS("LNG", LNG);
              cacheService.setS("LAT", LAT);
            }, function (error) {
              cacheService.setS("LNG", "0");
              cacheService.setS("LAT", "0");
            }, options);
          } else {
            cacheService.setS("LNG", "0");
            cacheService.setS("LAT", "0");
          }
        }
      });
    });
  })
/**
 * 静态变量，系统配置。
 */
  .service("constantService", ["$rootScope", function ($rootScope) {
    this.PID = "YNY";
    this.HOST = "http://115.28.19.205/server/";
    this.REQURL = "api/";
    this.WXREQURL = "wxjsapi/";
    this.USERINFO = "USERINFO";
    this.SUPERVISE = 'aw6w4w2c2l0s4e5n8c9om94702f5b97d';//监管ID
    this.cloundServer = "http://115.28.19.205/#/register";
    this.UPLOADDOMAIN = "http://res.nongyongtong.com/";
    this.productLocation = "http://115.28.19.205/#/productStoreProDetail";
    $rootScope.ISWINXINCLIENT = true;
    //农场版 轮播图  SOURCEAID 和 SOURCEID  以及业务类型
    this.PRODUCT_BANNER = {
      SOURCEAID: "CACCOUNT", //交易商 指 政府
      SOURCEID: this.SUPERVISE, //政府ID
      BANNERBUSINESSTYPE: {
        HOME: "HOME",    //	首页轮播	1
        PRODUCTSUPERVISE: "PRODUCTSUPERVISE",	//生产监管轮播	2
        PRICEANALYZE: "PRICEANALYZE",	//价格分析轮播	3
        PRODUCTSTORE: "PRODUCTSTORE",	//产品商城轮播	4
        PRODUCTSTOREAD: "PRODUCTSTOREAD",    //产品商城广告轮播	4
        NEWSANNUNCIATE: "NEWSANNUNCIATE" 	//新闻动态轮播	5
      }
    };
    this.BANNERBUSINESSTYPE = {
      HOME: "HOME",    //	首页轮播	1
      PRODUCTSUPERVISE: "PRODUCTSUPERVISE",	//生产监管轮播	2
      PRICEANALYZE: "PRICEANALYZE",	//价格分析轮播	3
      PRODUCTSTORE: "PRODUCTSTORE",	//产品商城轮播	4
      PRODUCTSTOREAD: "PRODUCTSTOREAD",    //产品商城广告轮播	4
      NEWSANNUNCIATE: "NEWSANNUNCIATE" 	//新闻动态轮播	5
    }
  }]);


Ionic4路由配置
qq_39239110的博客
01-18 3003
ionic 4路由配置方法： 步骤一：先新建一个page页面 $ ionic g page excute 步骤二：在tabs.module.ts里导入 import { ExcutePageModule } from ‘…/pages/sub/excute/excute.module’; @NgModule({ imports: [ IonicModule, CommonModule, Forms...
Web移动端混合开发--IonicFramework
行进中的Blog
11-09 2657
一：Ionic安装及使用一览图（请全屏查看） 号外！ 准备： JDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/index.html 安装好之后环境变量配置: 新建系统变量JAVA_HOME 和CLASSPATH 变量名：JAVA_HOME 变量值：C:Program FilesJavajdk...
ionic 路由 详解
03-22
ionic 路由 详解
ionic--配置路由
weixin_34415923的博客
09-17 211
1.ng-route index中引用文件： <script src="ionic.bundle.js"></script> <script src="angular.min.js"></script> <!--如果路径上出现！，可能是angular,js版本和angular-route.min.js版本不兼容，可换一下版本试试...
ionic的路由配置及参数传递
weixin_30379911的博客
04-24 233
html: <a href="" ui-sref="detail({ id: slide.id })"> <img class="full-image" ng-src="{{ slide.images }}" alt=""/></a> 路由配置 .state('detail', { url: '/de...
apiclound实现底部导航
xioxi
10-10 631
实现效果图 在根目录下index.html中写入代码: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,...
使用ionic切换页面卡顿的解决方法
08-31
在配置文件`app.js`中，引入`ionic-native-transitions`模块。这样做的目的是为了设置页面过渡的默认选项，以优化动画效果。在应用的配置区域（通常是在`.config`函数中）添加以下代码： ```javascript angular....
基于Ionic3和Angular5的仿京东商城Web应用开发教程
- **导航**：Ionic使用Angular Router进行页面间的导航和状态管理，支持懒加载和导航堆栈。 - **主题和样式**：可以使用SASS预处理器来定制组件的颜色、尺寸和布局。 - **平台适配**：Ionic提供工具来适配不同移动...
Flutter 笔记 | Flutter 核心原理（一）架构和生命周期
最新发布
川峰的博客
05-19 3616
简单来讲，Flutter 从上到下可以分为三层：框架层、引擎层和嵌入层，下面我们分别介绍： 1. 框架层 Flutter Framework，即框架层。这是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下： 底下两层（Foundation 和 Animation、Painting、Gestures）在 Google 的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是 Flutter Engine 暴露的底层UI库，提供动画、手势及
Hybrid移动应用在多页面大数据复杂业务背景下的优化实践方案
天外野草技术专栏
10-12 2871
前言对于混合应用而言，性能问题一直被吐槽，虽然设备的内存的不断增大，很大程度上缓解了这个一问题，但是和原生应用来讲还是有很大区别，本人从Phonegap2.x开始，一直的探索和使用混合应用技术。当时的2.x性能真是不怎么样，首次加载时间也比较长，后来phonegap被apache纳入旗下以后，更名为Cordova，可以说从此以后，性能问题得到了很大的改善，占用内存也越来越小，到如今使用的版本已经变为
APP底部导航
优快云mazhiyuan的博客
09-27 1127
charset="utf-8">   name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />         rel="shortcut icon" href="favicon.ico">   href="
ionic 项目框架app.js controller.js service.js简析
兰色的fire
11-09 2798
这里，我们只解释下前端开发常用的www目录底下，js包内的文件： 1.app.js这个是我们的App逻辑主页 主module starter在这里定义,同事注入依赖ionic和其他两个文件的module：['ionic', 'starter.controllers', 'starter.services', ] 注：controllers.js services.js都作为modul
apicloud aui 做底部导航
罗承权
09-01 2286
apicloud aui 做底部导航
APIClound从0开始写脉脉（2）底部导航栏
梧桐下的四叶草
10-07 1759
参考文章：http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=415&extra=&page=1在第一讲里已经将布局做好了，所以现在就只要在footer-div里面添加代码就能够做出一个底部导航栏了。 第一步，我们需要添加如下格式：<input type="radio"/> <a> <p></p> <cent
ionic-app.js分析
10-22 370
转载于:https://www.cnblogs.com/Anzhongliu/p/6091741.html
【2016.09.07】【ionic 导航和路由的使用】
chengji4739的博客
09-07 142
一、index页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta ...
APICloud AVM框架 实现导航栏菜单
白鱼赤乌的博客
04-09 728
AVM官方框架中有一个 frame-group的组件，在栏目较少的情况下是没有问题的，一般5个以上就会出现栏目记载一起的情况。 我在此组件的基础上，将栏目导航中view标签换成了 scroll-view标签，并设置成允许横向滚动。然后修改了标签的样式。 ......
Ionic 入门与实战之第三章：Ionic 项目结构以及路由配置
DevOpenClub 专栏
06-21 120
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章，主要对 Ionic 的项目结构作了介绍，并讲解了Ionic 中的路由概念以及相关配置。 原文发表于我的技术博客 1. Ionic 项目结构 这是初始化创建的 Ionic 项目结构，接下来将一一讲解。 因为 Ionic 使用了 Cordova 技术，所以项目的文件架构基本和 Cordova 的项目类似。 1.1 a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值