您的位置: 首页  >  文章  >  Ionic基础——js指令布局

Ionic基础——js指令布局

分类: 文章 • 2023-12-12 16:04:22

1)页眉/ion-header-bar:标题栏

  align-title——设置标题文字的对齐方式；

  no-tap-scroll——当点击标题时，是否将内容区域自动滚动到初始位置；

2)页脚/ion-footer-bar：页脚栏

3)内容/ion-content:内容区

 overflow-scroll——设置是否不用系统内置的滚动条；

 scroll——设置内容是否禁止滚动(常用作百度地图等)；

 

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body ng-controller="firstCtrl">  
  9.     <ion-header-bar align-title="center" class="bar-positive" no-tap-scroll="false">  
  10.         <h1 class="title">ion-header-bar</h1>  
  11.     </ion-header-bar>  
  12.     <ion-content overflow-scroll="false">  
  13.         <ul class="list">  
  14.             <li class="item" ng-repeat="item in items">{{item}}</li>  
  15.         </ul>  
  16.     </ion-content>  
  17.     <ion-footer-bar class="dark-bg">  
  18.         <h1 class="title light">ion-footer-bar</h1>  
  19.     </ion-footer-bar>  
  20. </body>  
  21. <script>  
  22.     angular.module("myApp",["ionic"])  
  23.             .controller("firstCtrl",function($scope){  
  24.                 $scope.items = [];  
  25.                 for(var i=0;i<20;i++)  
  26.                     $scope.items.push("line " + i);  
  27.             });  
  28. </script>  
  29. </html>  
效果：

Ionic基础——js指令布局

 4)滚动框/ion-scroll

   direction——设置内容可以滚动的方向；

   zooming——是否支持pinch-to-zoom(捏拉缩放)；

  

[html] view plain copy
  1. <ion-scroll class="has-header" zooming="true" direction="xy" style="width: 500px; height: 500px">  
  2.         <div style="width: 5000px; height: 5000px; background: url('img/map.jpg') repeat"></div>  
  3.     </ion-scroll>  

  5)下拉更新数据/ion-refresher

    on-refesh——当用户向下拉动足够的距离并松开时，执行此表达式；

    on-pulling——当用户开始向下拉动时，执行此表达式；

    pulling-text——当用户向下拉动时，显示此文本；

    pulling-icon——当用户向下拉动时，显示此图标；

    refreshing-icon——当用户向下拉动并松开后，显示的等待图标。

    spinner——作用与refreshing-icon一样，但spinner是基于svg动画(ionic推荐使用spinner)；

    disable-pulling-rotation——禁止下拉图标旋转动画；

    注意：在刷新完毕后，应当使用作用域的$broadcast()方法通知框架：

    $scope.$broadcast("scroll.refreshComplete");

    

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  8. </head>  
  9. <body  ng-controller="firstCtrl">  
  10.     <ion-header-bar class="bar-positive">  
  11.         <h1 class="title">ion-refresher</h1>  
  12.     </ion-header-bar>  
  13.     <ion-content>  
  14.         <ion-refresher pulling-text="刷新..."  on-refresh="doRefresh()" spinner="android">  
  15.         </ion-refresher>  
  16.         <ul class="list">  
  17.             <li class="item" ng-repeat="item in items">{{item}}</li>  
  18.         </ul>  
  19.     </ion-content>  
  20. </body>  
  21. <script>  
  22.     angular.module("myApp", ["ionic"])  
  23.             .controller("firstCtrl", function($scope) {  
  24.                 $scope.items = ['item1','item2','item3'];  
  25.                 var base = 1;  
  26.                 $scope.doRefresh = function() {  
  27.                     for(var i=0;i<10;i++,base++)  
  28.                         $scope.items.unshift(["item ",base].join(""));  
  29.                     // Stop the ion-refresher from spinning  
  30.   
  31.                     //刷新完毕后，用$broadcast通知框架  
  32.                     $scope.$broadcast("scroll.refreshComplete");  
  33.                 };  
  34.             });  
  35. </script>  
  36. </html>  

Ionic基础——js指令布局

  6)上拉更新数据/ion-infinite-scroll

    on-infinite(必须)——当滚动到底部时执行此表达式；

    distance(可选)——距底部距离百分比,当距离底部超过此数据时，执行on-infinite,默认为1%；

    icon(可选)——载入时显示的图标(默认是ion-load-d),ionic推荐使用spinner;

    spinner(可选)——载入时显示的spinner,默认是ionSpinner;

    immediate-check(可选)——是否在载入时立即检查滚动框范围。 

   注意：在更新完毕后，应当使用作用域的$broadcast()方法通知框架：

         $scope.$broadcast("scroll.infiniteScrollComplete");

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body ng-controller="firstCtrl">  
  9.     <ion-header-bar class="bar-positive">  
  10.         <h1 class="title">ion-infinite-scroll</h1>  
  11.     </ion-header-bar>  
  12.     <ion-content>  
  13.         <ion-infinite-scroll   on-infinite="load_more();" icon="ion-load-a" distance="1%" immediate-check="true">  
  14.         </ion-infinite-scroll>  
  15.         <ul class="list">  
  16.             <li class="item"  ng-repeat="item in items">{{item}}</li>  
  17.         </ul>  
  18.     </ion-content>  
  19. </body>  
  20. <script>  
  21.     angular.module("myApp",["ionic"])  
  22.             .controller("firstCtrl",function($scope,$timeout){  
  23.                 $scope.items = ['1111','22222'];  
  24.                 var base = 0;  
  25.                 $scope.load_more = function(){  
  26.                     $timeout(function(){  
  27.                         for(var i=0;i<3;i++,base++)  
  28.                             $scope.items.push(["item ",base].join(""));  
  29.                         $scope.$broadcast("scroll.infiniteScrollComplete");  
  30.                     },500);  
  31.                 };  
  32.             });  
  33. </script>  
  34. </html>  

  7)$ionicScrollDelegate指令

    $ionicScrollDelegate服务提供如下的常用方法：

    resize()——重新计算容器尺寸。当父元素大小变化时，会调用此方法。

    scrollTop([shouldAnimate])——回到顶部([动画效果])；

    scrollBottom([shouldAnimate])——回到底部([动画效果]);

    scrollTo(left,top,[shouldAnimate])——滚动到指定位置(水平值，垂直值，[动画效果])；

    scrollBy(left,top,[shouldAnimate])——滚动指定偏移量(水平值，垂直值，[动画效果])；

    getScrollPosition()——读取当前视图位置。返回值为一个JSON对象，具有left和top属性，表示x和y的值。

 

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  8. </head>  
  9. <body ng-controller="firstCtrl">  
  10.     <ion-header-bar class="bar-positive">  
  11.         <h1 class="title">$ionicScrollDelegate</h1>  
  12.     </ion-header-bar>  
  13.     <ion-content>  
  14.         <ul class="list">  
  15.             <li class="item"  ng-repeat="item in items">{{item}}</li>  
  16.         </ul>  
  17.     </ion-content>  
  18.     <ion-footer-bar class="bar-positive">  
  19.         <a class="button" ng-click="gotop();">回到顶部</a>  
  20.         <a class="button" ng-click="gobottom();">回到底部</a>  
  21.         <a class="button" ng-click="getScrollPosition();">ScrollPosition</a>  
  22.     </ion-footer-bar>  
  23. </body>  
  24. </html>  
  25. <script>  
  26.     angular.module("myApp",["ionic"])  
  27.     .controller("firstCtrl",["$scope","$ionicScrollDelegate",function($scope,$ionicScollDelegate){  
  28.         $scope.items = [];  
  29.         for(var i=0;i<100;i++)  
  30.             $scope.items.push(["item ",i+1].join(""));  
  31.         $scope.gotop = function(){  
  32.             $ionicScollDelegate.scrollTop(true);  
  33.         }  
  34.         $scope.gobottom = function(){  
  35.             $ionicScollDelegate.scrollBottom(true);  
  36.         }  
  37.   
  38.         $scope.getScrollPosition = function(){  
  39.            console.log($ionicScollDelegate.getScrollPosition());  
  40.   
  41.         }  
  42.   
  43.   
  44.   
  45.     }]);  
  46. </script>  

相关推荐