Ionic

1、Ionic提供基于AngularJS的扩展

结构：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar align-title="center">
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <p>这是正文</p>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);
</script>

</body>
</html>

2、ionRefresher
下拉刷新组件
①用在ionContent第一个子元素
②通过on-refresh去绑定刷新要执行的动作
③事件 $scope.$broadcast('scroll.refreshComplete')

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <ion-refresher
    on-refresh="refresh()"
    >

  </ion-refresher>
  <ul class="list list-inset">
    <li class="item"
        ng-repeat="tmp in list track by $index">
      {{tmp}}
    </li>
  </ul>

</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', function ($scope) {
      $scope.list = [100,200,300];

      $scope.refresh = function () {
        console.log(' on refresh func is called ');
        //向数组插入一条数据
        $scope.list.push(
          Math.floor(Math.random()*10));

        //通过event的方式通知ionic刷新结束了
        $scope.$broadcast('scroll.refreshComplete')
      }

    }])

</script>

</body>
</html>

3、ionInfiniteScroll
上拉加载更多组件
①用在ionContent最后一个子元素
②通过on-infinite去绑定加载更多时要执行的动作
③事件 $scope.$broadcast('scroll.infiniteScrollComplete');
④该组件默认会在首次加载时判断是否可以加载更多数据，如果可以，就会自动触发on-infinite；可以通过immediate-check='true/false'调整是否允许首次加载是否要自动触发加载更多

注意事项：如果没有更多数据可以加载了，通过ngIf指令移除该组件

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">

  <ul class="list list-inset">
    <li class="item"
        ng-repeat="tmp in list track by $index">
      {{tmp}}
    </li>
  </ul>
  <ion-infinite-scroll
    immediate-check="false"
    on-infinite="loadMore()">

  </ion-infinite-scroll>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);
  app.controller('myCtrl',
    ['$scope', function ($scope) {
      $scope.list = [10, 20, 30, 40];
      $scope.loadMore = function () {
        console.log('in load more');
        $scope.list.push(
          Math.floor(Math.random() * 100));
        //通过事件方式通知ionic加载完成了
        $scope.$broadcast(
          'scroll.infiniteScrollComplete');
      }

    }
    ]
  )
</script>

</body>
</html>

4、$ionicScrollDelegate
在服务中封装了控制滚动的方法
scrollTop scrollBottom scrollTo()
getScrollPosition

例子：滚动到列表项内容为20：
Object {left: 0, top: 1060, zoom: 1}

程序控制恢复到指定的位置：
scrollTo()

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body ng-controller="myCtrl">

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <ul class="list list-inset">
    <li class="item" ng-repeat="tmp in list">
      {{tmp}}
    </li>
  </ul>

</ion-content>

<ion-footer-bar>
  <button
    ng-click="goToTop()"
    class="button button-small button-positive">
    Top
  </button>
  <button
    ng-click="getNowPos()"
    class="button button-small button-assertive">
    GetPosition
  </button>
  <button
    ng-click="restorePosition()"
    class="button buton-small button-balanced"
    >
    RestorePos
  </button>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', '$ionicScrollDelegate',
      function ($scope, $ionicScrollDelegate) {

        $scope.list = [];
        for (var i = 0; i < 500; i++) {
          $scope.list.push(i);
        }

        $scope.goToTop = function () {
          //滚动到顶部
          $ionicScrollDelegate.scrollTop(true);
        }

        $scope.getNowPos = function () {
          //得到当前的位置
          var postion = $ionicScrollDelegate.getScrollPosition();
          console.log(postion);
        }

        $scope.restorePosition = function () {
          //滚动到指定的位置
          $ionicScrollDelegate.scrollTo(0,1060,true);
        }

      }])

</script>

</body>
</html>

5、ionicTab 选项卡/标签页
css:tabs tab-item tabs-icon-top/bottom/left/right
通过指令实现选项卡

ionTabs: 通过class来设置tabs-icon-top tabs-positive
ionTab： 通过属性title icon icon-on icon-off on-select/deselect ng-click
注意事项：第一个标签页式默认被选中的。on-select只要是该标签页被选中就会触发

练习：实现点击不同的tab页面，更新头部标题的信息
音乐--》music
电影--》movie
游戏--》game

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body ng-controller="myCtrl">

<ion-header-bar>
  <h1 class="title">{{headInfo}}</h1>
</ion-header-bar>

<ion-tabs class="tabs-icon-top">
  <ion-tab on-select="handleSelect(0)" title="音乐" icon="ion-headphone">
    <ion-view>
      <ion-content>
        <ul class="list list-inset">
          <li class="item">Music001</li>
          <li class="item">Music002</li>
          <li class="item">Music003</li>
        </ul>
      </ion-content>
    </ion-view>
  </ion-tab>
  <ion-tab on-select="handleSelect(1)" title="电影"
    icon="ion-videocamera">
    <ion-view>
      <ion-content>
        <ul class="list list-inset">
          <li class="item">Movie001</li>
          <li class="item">Movie002</li>
          <li class="item">Movie003</li>
        </ul>
      </ion-content>
    </ion-view>
  </ion-tab>
  <ion-tab on-select="handleSelect(2)" title="游戏"
    icon-on="ion-ios-football"
    icon-off="ion-ios-football-outline">
    <ion-view>
      <ion-content>
        <ul class="list list-inset">
          <li class="item">Game001</li>
          <li class="item">Game002</li>
          <li class="item">Game003</li>
        </ul>
      </ion-content>
    </ion-view>
  </ion-tab>
</ion-tabs>

<!--
<ion-content>
  <p>这是正文</p>
</ion-content>
-->


<!--<ion-footer-bar>-->
  <!--<h1 class="title">footer</h1>-->
<!--</ion-footer-bar>-->

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', function ($scope) {

      $scope.headInfo = "";
      
      $scope.handleSelect = function (id) {
        if(id == 0)
        {
          $scope.headInfo = "music";
        }
        else if(id == 1)
        {
          $scope.headInfo = "movie";
        }
        else
        {
          $scope.headInfo = "game";
        }
        
      }

  }])

</script>

</body>
</html>

6、侧边栏菜单
ionSideMenus
ionSideMenu
ionSideMenuContent

ionSideMenu:
side/width/is-eneabled
属性：menu-toggle menu-close
方法：$ionicSideMenuDelegate.toggleLeft/right

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-side-menus>
  <!-- 实现一个侧边栏菜单-->
  <ion-side-menu class="positive-bg">
    <button class="button-icon ion-close" menu-close="left"></button>
    <ul class="list list-inset">
      <li class="item">个人中心</li>
      <li class="item">帮助与关于</li>
      <li class="item">退出登录</li>
    </ul>
  </ion-side-menu>

  <!-- 再实现一个右边打开的侧边栏菜单-->
  <ion-side-menu
    width="100"
    class="balanced-bg" side="right">
    <ul class="list list-inset">
      <li class="item">个人中心</li>
      <li class="item">帮助与关于</li>
      <li class="item">退出登录</li>
    </ul>
  </ion-side-menu>

  <!-- 正文-->
  <ion-side-menu-content>
    <ion-header-bar>
      <h1 class="title">header</h1>
    </ion-header-bar>

    <ion-content ng-controller="myCtrl">
      <p>这是正文</p>
      <button menu-toggle="left">操作侧边栏菜单</button>
      <br/>
      <button
        ng-click="openLeft()"
        class="button button-balanced">
        打开左边的侧边栏菜单
      </button>
      <br/>
      <button ng-click="operateRightMenu()"
              class="button button-assertive">
        操作右边侧边栏菜单
      </button>
    </ion-content>

    <ion-footer-bar>
      <h1 class="title">footer</h1>
    </ion-footer-bar>
  </ion-side-menu-content>
</ion-side-menus>



<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
  ['$scope','$ionicSideMenuDelegate',
    function ($scope,$ionicSideMenuDelegate) {
      //打开左边的侧边栏菜单
      $scope.openLeft = function () {
        $ionicSideMenuDelegate.toggleLeft(true);
      }
      
      //操作右边的侧边栏菜单
      $scope.operateRightMenu = function () {
        $ionicSideMenuDelegate.toggleRight();
      }
      
    }
  ])

</script>

</body>
</html>

7、窗口
①actionSheet(从下往上弹出的操作表)
$ionicActionSheet.show({})
参数中的对象:titleText/cancelText/destructiveText/buttons/cancel/destructiveButtonClicked/buttonClicked

②popup(在中间显示的弹窗)
$ionicPopup.alert/prompt/confirm()

③loading
$ionicLoading.show/hide()

练习：实现一个列表，支持下拉刷新，在下拉刷新的处理函数中加载数据（每次加载数据，都要显示一个加载中的窗口 loading...,只出现2s）

分析：
①构造数据并显示
②支持下拉刷新，每次在头部插入一条随机数据
③在下拉刷新时添加加载中的窗口

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <p>这是正文</p>
  <button
    ng-click="showActionSheet()"
    class="button">
    分享文章
  </button>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',[
    '$scope','$ionicActionSheet',
    function ($scope,$ionicActionSheet) {

      //显示操作表
      $scope.showActionSheet = function () {
        $ionicActionSheet.show({
          titleText:'分享文章窗口',
          destructiveText:'删除',
          destructiveButtonClicked: function () {
            console.log('选择了删除操作');
            return true;
          },
          cancelText:'取消',
          cancel: function () {
            console.log('选择了取消的操作');
            return true;
          },
          buttons:[
            {text:'分享到朋友圈'},
            {text:'分享到微博'}
          ],
          buttonClicked: function (index) {
            if(index == 0)
            {
              console.log('分享到朋友圈成功');
            }
            else
            {
              console.log('分享到微博成功');
            }
            return true;
          }
        });
      }
      
    }
  ])

</script>

</body>
</html>

8、列表
ion-list/ion-item/ion-checkbox/ion-toggle/'ion-radio

ion-option-button
ion-delete-button(show-delete='true')
ion-reorder-button(show-reorder='true')

11 22
22 33
33 44
44 55
55 11

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <p>这是正文</p>
  <button
    class="button button-assertive"
    ng-click="showConfirm()">
    点击显示窗口
  </button>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', '$ionicPopup',
      function ($scope, $ionicPopup) {

        //显示一个确认窗口
        $scope.showConfirm = function () {
          $ionicPopup
            .confirm({
              title: '请确认',
              template: '请确认周边安全',
              okText: '确认',
              cancelText: '取消'
            })
            .then(function (result) {
              console.log(result);
              if (result) {
                $scope.showPrompt();
              }
            });
        }
        //显示一个输入提示窗口
        $scope.showPrompt = function () {
          $ionicPopup
            .prompt({
              title: '请输入金额',
              template: "请输入本次取现的金额",
              inputType: 'text',
              okText: '确认取现',
              cancelText: '取消本次操作'
            })
            .then(function (result) {
              console.log(result);
              if(result)
              {
                $scope.showAlert();
              }
            })
        }
        //显示一个警告窗口
        $scope.showAlert = function () {
          $ionicPopup.alert({
            title:'操作成功',
            template:'请取走您的卡'
          });
        }
      }
    ])

</script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <p>这是正文</p>
  <button
    ng-click="load()"
    class="button button-balanced">
    加载数据
  </button>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', '$ionicLoading','$timeout',
      function ($scope, $ionicLoading,$timeout) {

        $scope.load = function () {
          //通过$ionicLoading 实现一个加载中的窗口
          $ionicLoading.show({
            template:'正在加载...'
//            duration:3000
          });

          //延迟3s，关闭加载中的窗口
          $timeout(
            function () {
              $ionicLoading.hide();
            },
            3000
          );

        }

      }
    ])

</script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <ion-refresher on-refresh="doRefresh()">

  </ion-refresher>
  <ul class="list">
    <li class="item" ng-repeat="tmp in list">
      {{tmp}}
    </li>
  </ul>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope', '$ionicLoading','$timeout',
      function ($scope, $ionicLoading,$timeout) {
        $scope.list = [10, 20, 30, 44];

        $scope.doRefresh = function () {

          /*
          $ionicLoading.show()
          $http.get('url').success(function(){
           $ionicLoading.hide()
          })*/

          $scope.list.unshift(
            Math.floor(Math.random() * 100));

          $ionicLoading.show({
            template:'loading...'
          });
          $timeout(function () {
            $ionicLoading.hide();
            $scope.$broadcast(
              'scroll.refreshComplete');
          },2000)

        }

      }
    ])

</script>

</body>
</html>

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body>

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <ion-list>
    <ion-item>1</ion-item>
    <ion-item>2</ion-item>
    <ion-item>3</ion-item>
    <ion-radio>男</ion-radio>
    <ion-radio>女</ion-radio>
    <ion-checkbox>复选框</ion-checkbox>
  </ion-list>
</ion-content>

<ion-footer-bar>
  <h1 class="title">footer</h1>
</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);
</script>

</body>
</html>

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/ionic.css"/>
  <script src="js/ionic.bundle.js"></script>
  <title></title>
</head>
<body ng-controller="myCtrl">

<ion-header-bar>
  <h1 class="title">header</h1>
</ion-header-bar>

<ion-content>
  <button ng-click="toggleDelete()">
    {{deleteEnableText}}
  </button>
  <ion-list show-delete="deleteEnable">
    <ion-item ng-repeat="tmp in list">
      <ion-delete-button
        ng-click="deleteItem($index)"
        class="ion-minus-circled">

      </ion-delete-button>
      {{tmp}}
    </ion-item>
  </ion-list>

  <br/>
  <ion-list>
    <ion-item>
      michael
      <ion-option-button class="button-positive">
        action1
      </ion-option-button>
      <ion-option-button class="button-assertive">
        action2
      </ion-option-button>
    </ion-item>
  </ion-list>

  <!-- 学习列表在ionic手工排序的实现 -->
  <ion-toggle ng-model="reorderEnable">排序</ion-toggle>
  <ion-list show-reorder="reorderEnable">
    <ion-item ng-repeat="tmp in list">
      {{tmp}}
      <ion-reorder-button
        on-reorder="reOrder(tmp,$fromIndex,$toIndex)"
        class="ion-navicon">

      </ion-reorder-button>
    </ion-item>
  </ion-list>

</ion-content>

<ion-footer-bar>

</ion-footer-bar>

<script>
  var app = angular.module('myApp', ['ionic']);

  app.controller('myCtrl',
    ['$scope',
      function ($scope) {
        $scope.list = [11, 22, 33, 44, 55];

        $scope.deleteEnableText = "编辑";
        $scope.deleteEnable = false;

        //删除指定位置的数据
        $scope.deleteItem = function (index) {
          $scope.list.splice(index, 1);
        }

        //是否允许删除按钮显示的方法
        $scope.toggleDelete = function () {
          $scope.deleteEnable = !$scope.deleteEnable;
          if ($scope.deleteEnable) {
            $scope.deleteEnableText = '编辑完成'
          }
          else {
            $scope.deleteEnableText = '编辑'
          }
        }

        //排序时调用的方法
        $scope.reOrder = function (item, from, to) {

          //删除原本位置的数据
          $scope.list.splice(from,1)
          //在目的地位置插入数据
          $scope.list.splice(to,0,item)
        }


      }])

</script>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/web-fusheng/p/7050687.html