文档章节

ionic开发:第二步

Jack_Q
 Jack_Q
发布于 2015/05/28 09:41
字数 530
阅读 306
收藏 1

项目创建成功后,正式进入app开发,做一个房屋信息的app。

首先,通过草图画出ui界面

大体布局分为header,content,footer3个部分:

底部footer为tabs ui

ok,先来认识一些ionic里的布局UI:

1.标题栏:ion-header-bar和ion-nav-bar,两者的区别个人理解就是ion-header-bar里的内容一般为原生html元素,不支持路由和导航栈(?).ion-nav-bar支持这2个特性,更多的是用在返回键。

2.页脚栏 : ion-footer-bar

3.内容区:ion-content

4.滚动框:ion-scroll

5.拉动刷新:ion-refresh 使用指令ion-refresher可以为滚动容器(ion-scroll或ion-content)增加拉动刷新/pull-to-refresh的功能

6.滚动刷新:ion-infinite-scroll

7.tabs:ion-tabs  (在android环境里默认是在top顶部,如果想其bottom底部须$ionicConfigProvider配置下)

.config(function ($ionicConfigProvider) {//android ui风格
        $ionicConfigProvider.tabs.style('standard'); // Tab风格
        $ionicConfigProvider.tabs.position('bottom'); // Tab位置
        $ionicConfigProvider.navBar.alignTitle('center'); // 标题位置
        $ionicConfigProvider.navBar.positionPrimaryButtons('left'); // 主要操作按钮位置
        $ionicConfigProvider.navBar.positionSecondaryButtons('right'); //次要操作按钮位置
    })

8.ion-nav-view ionic能够记录用户的导航历史(可以设置最大缓存数),能够在导航页面间添加过渡效果。ionic使用的是AngularUI router模块提供了一种强大的state manager,可以和named, nested, and parallel views绑定,允许不止一个模板来渲染页面。另外,不同的state不需要和url绑定,数据会自动更新。
ion-nav-view 是用来渲染视图中的模板的,每个模板是其中的一个状态。不同的state通常在程序中定义映射到一个url。(ion-view 是其子ui)

9.模态对话框: $ionicModal ,模态对话框关闭之前,其他的用户交互行为被阻止

#fromTemplateUrl创建modal 
$ionicModal.fromTemplateUrl('views/my/login.html',{
            scope:$scope
        }).then(function(modal){
            $scope.modal = modal;
  });
  $scope.modal.show();
  $scope.modal.hide();
//模版视图对应的是<ion-modal-view>

10.弹出框:$ionicPopup  通常用于提醒、警告等,在用户响应之前其他交互行为不能继续。与模态对话框覆盖整个屏幕空间不同,弹出框通常仅占据一部分屏幕空间

11.loading框:$ionicLoading 


.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };


© 著作权归作者所有

Jack_Q

Jack_Q

粉丝 13
博文 49
码字总数 9557
作品 1
武汉
架构师
私信 提问
加载中

评论(2)

Jack_Q
Jack_Q 博主

引用来自“cabbeen”的评论

好吧。。图片太酷了
,猜是什么纸?
cabbeen
cabbeen
好吧。。图片太酷了
Tonge/TongeNewsApp

注:此项目服务器已经关闭,接口已无法使用。 ###前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结。实战开发中遇到的各种问题的解决方案,也都将毫无保...

Tonge
2016/11/10
0
0
Ionic框架入门(原文翻译)

注: 从未做过翻译,打算学学Ionic框架,从网上未找到中文资料,看到官网上有一个入门资料,所以打算试着用自己半瓶子的英语做个翻译尝试。这是一个有些痛苦与长期的过程。翻译一部分,放一部...

itwarcraft
2014/09/04
2.6K
0
用WijmoJS玩转您的Web应用 —— Ionic

前言: 在本文中,我们将着重介绍如何将WijmoJS与Ionic一起使用,来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中,我们已经介绍了使用WijmoJS与Angular、React、Vue三大框架...

葡萄城控件技术团队
2018/06/26
27
0
JavaScript ,Python,java,Go系列算法之选择排序

常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。用一张图概括: 选择排序 选择排序是一种简单直观的排序算法,无论什么数据进去都...

湖南小影
2017/05/10
0
0
大漠穷秋/NiceFish-SpringMybatis

NiceFish-SpringMybatis NiceFish是一个系列教学项目,都是Angular这个技术栈。 NiceFish:美人鱼,这是一个微型Blog系统,前端基于Angular 4.x + PrimeNG。http://git.oschina.net/mumu-osc...

大漠穷秋
2017/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JDBC+C3P0+DBCP 基本使用

1.概述 这篇文章主要说了JDBC的基本使用,包括Statement,PreparedStatement,JDBC的连接,Mysql创建用户创建数据表,C3P0的连接与配置,DBCP的连接与配置. 2.mysql的处理 这里的JDBC使用Mysql作为...

Blueeeeeee
今天
5
0
MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
9
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
7
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
5
0
4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

你好,我是彤哥,本篇是netty系列的第四篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使用纯纯的N...

彤哥读源码
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部