欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ionic笔记

程序员文章站 2022-06-23 20:33:58
ionic教程网站:http://www.ionic.wang/ 1.ui-router路由简介 https://blog.csdn.net/mcpang/article/details/55101566 2.内联模版 1.
2.va ......

ionic教程网站:http://www.ionic.wang/

1.ui-router路由简介

  https://blog.csdn.net/mcpang/article/details/55101566

2.内联模版

  1.<div ng-include="'a.html'"></div>
  2.var partial = $templateCache.get("a.html");
  3.使用$http 服务
    $http.get("a.html",{cache:$templateCache})
      .success(function(d,s){..})
      .error(function(d,s){...});

3.ionic 路由机制: 状态

  视图元素ui - view 

angular.module("myApp",["ionic"]) 
            .config(function($stateProvider){ 
                $stateProvider.state("state1",{...}) 
                    .state("state2",{...}) 
                    .state3("state3",{...}); 
            });

4.导航视图 : ion-nav-view 路由对应的页面

用来代替ui-view 指令
<ion-nav-view>
<!--模板内容将被插入此处-->
</ion-nav-view>

5.模板视图 : ion-view 

<script id="..." type="text/ng-template"> 
        <ion-view> 
            <!--模板视图内容--> 
        </ion-view> 
    </script> 

  view-title - 视图标题文字
  cache-view - 是否对这个模板视图进行缓存 允许值为:true | false,默认为 true
  hide-back-button -是否隐藏导航栏中的返回按钮 允许值为:true | false,默认为 false
  hide-nav-bar - 是否隐藏导航栏 允许值为:true | false,默认为 false

 

6.导航栏 : ion-nav-bar  

  属性:
    align-title - 标题对齐方式 允许值为: left | right | center。默认为 center,居中对
    no-tap-scroll - 点击导航栏时是否将内容滚动到顶部 允许值为:true | false。默认为 true 回到顶部

7.回退按钮 : ion-nav-back-button

<ion-nav-bar> 
       <ion-nav-back-button></ion-nav-back-button> 
</ion-nav-bar>

8.视图特定按钮 : ion-nav-buttons 

  指令 ion-nav-buttons 必须是指令 ion-view 的直接后代: 

<ion-view> 
            <ion-nav-buttons> 
                <!--按钮定义--> 
            </ion-nav-buttons> 
        </ion-view>

  ion-nav-buttons 指令有一个属性用于声明这些按钮在导航栏中的位置: 

    side - 在导航条的那一侧放置按钮。允许值:primary | secondary | left | right

9.定制标题内容 : ion-nav-title 

  ion-nav-title 必须是 ion-view 的 直接后代

10.定制视图切换方式 : nav-transition 

  视图切换时的动画转场方式,可以使用 nav-transition 指令声明:
  1. <any ui-sref=".." nav-transition="..">...</any>

  目前支持的转场方式有三种:
     android - android 模拟  ios - ios 模拟  none - 取消转场动画

11.定制视图切换方向 : nav-direction

  使用 nav-direction 指令声明视图转场时的切换方向:
  1. <any ui-sref=".." nav-direction="..">...</any>
  目前支持的选项有:
     forward - 新视图从右向左进入  back - 新视图从左向右进入  enter -  exit -  swap -

12.导航栏脚本接口 : $ionicNavBarDelegate 

服务$ionicNavBarDelegate 提供了控制导航栏的脚本接口:
 align([direction]) - 标题对齐方式。
参数 direction 是可选的,允许值为:left | right | center,缺省值为 center。
 showBackButton([show]) - 是否显示回退按钮
参数 show 是可选的,允许值为:true | false,缺省值为 true。
 showBar(show) - 是否显示导航栏
参数 show 的允许值为:true | false 。
 title(title) - 设置导航栏标题
参数 title 为 HTML 字符串。

13.访问历史 : $ionicHistory

ionic 的导航框架会自动维护用户的访问历史栈,我们可以通过服务$ionicHistory 管理访 问轨迹:
 viewHistory() - 返回视图访问历史数据  currentView() - 返回当前视图对象  currentHistoryId() - 返回历史 ID  currentTitle([val]) - 设置或读取当前视图的标题
参数 val 是可选的。无参数调用 currentTile()方法则返回当前视图的标题。
 backView() - 返回历史栈中前一个视图对象
如果从视图 A 导航到视图 B,那么视图 A 就是视图 B 的前一个视图对象。
 backTitle() - 返回历史栈中前一个视图的标题  forwardView() - 返回历史栈中的下一个视图对象  currentStateName() - 返回当前所处状态名  goBack() - 切换到历史栈中前一个视图
当然,前提是存在前一个视图。
 clearHistory() - 请空历史栈
除了当前的视图记录,clearHistory()将清空应用的全部访问历史

14.ionic一些常用的标签

http://www.ionic.wang/
ionContent易用的内容区域,该区域可以用Ionic的自定义滚动视图进行配置,或浏览器内置的溢出滚动。
ion-refresher 允许你添加下拉刷新滚动视图。

ion-infinite-scroll  分页使用,详见http://www.cnblogs.com/soul-wonder/p/8865081.html
ion-list
ion-item ionList的内部项
<ion-slides options="pro_options_jd" slider="">滑动框
ion-scroll 创建一个包含所有内容的可滚动容器 zooming 是否支持双指缩放。

nav-direction
  视图过渡间的动画方向: forward(向前), back(向后), enter(进入), exit(退出), swap(交换).

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
  ng-class 指令的值可以是字符串,对象,或一个数组。
    如果是字符串,多个类名使用空格分隔。
    如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加。
    如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

ng-src 指令覆盖了 <img> 元素的 src 属性。
  如果你使用了 AngularJS 代码设置图片地址,请使用 ng-src 指令替代 src 属性。