一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

ionic的側(cè)滑和下拉刷新效果

 八塊腹肌的壞蛋 2016-11-15

一,側(cè)滑效果

主要涉及到三個(gè)地方

1,菜單頁面

主要分為主頁面和側(cè)滑頁面兩部分,又分別都包含頂部bar和主要內(nèi)容部分

注意:主頁面內(nèi)容部分,關(guān)鍵的菜單內(nèi)容name要對應(yīng)到是菜單內(nèi)容的頁面(在app.js中,下面會(huì)貼出)

          item href的構(gòu)成:1,#本頁面  2,app本頁面鏈接   3,todolist/{{menu.groupId}}列表頁面鏈接(沒有冒號(hào))

  1. <ion-side-menus>  
  2.   <!--主頁面-->  
  3.   <ion-side-menu-content class="bar-positive">  
  4.     <!--主頁面頂部bar-->  
  5.     <ion-nav-bar class="bar-positive">  
  6.       <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i></ion-nav-back-button>  
  7.     </ion-nav-bar>  
  8.     <!--主頁面內(nèi)容 關(guān)鍵的菜單內(nèi)容name要對應(yīng)到是菜單內(nèi)容的頁面-->  
  9.     <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>  
  10.   </ion-side-menu-content>  
  11.   <!--側(cè)滑頁面-->  
  12.   <ion-side-menu side="left">  
  13.     <!--側(cè)滑頁面頂部bar-->  
  14.     <ion-header-bar align-title="center" class="bar-dark">  
  15.       <h1 class="title">需求</h1>  
  16.       <div class="buttons pull-right" nav-clear menu-close ng-click="settings()">  
  17.         <button class="button button-icon icon ion-gear-b"></button>  
  18.       </div>  
  19.     </ion-header-bar>  
  20.     <!--側(cè)滑頁面主要內(nèi)容-->  
  21.     <ion-content class="has-header">  
  22.       <ion-list>  
  23.         <!--item href的構(gòu)成:1,#本頁面  2,app本頁面鏈接   3,todolist/{{menu.groupId}}列表頁面鏈接(沒有冒號(hào))-->  
  24.         <ion-item nav-clear menu-close ng-repeat="menu in menus" href="#/app/todolist/{{menu.groupId}}">  
  25.           
  26.           <i class="icon ion-android-clock"></i>  {{menu.title}} <span class="badge" ng-if="menu.badge>0">{{menu.badge}}</span>  
  27.         </ion-item>  
  28.       </ion-list>  
  29.     </ion-content>  
  30.       
  31.   </ion-side-menu>  
  32. </ion-side-menus>  

2,app.js

在配置頁面記得,通過菜單內(nèi)容頁面的name,把菜單和菜單內(nèi)容頁關(guān)聯(lián)起來

對于菜單頁,設(shè)置的abstract: true,暫時(shí)作用是不可以跳轉(zhuǎn)到此頁面(即不可以跳轉(zhuǎn)到menu.html)

[javascript] view plain copy
在CODE上查看代碼片派生到我的代碼片
  1. angular.module('todo.io', ['ionic', 'todo.io.directives', 'todo.io.filters', 'todo.io.services', 'todo.io.controllers', 'nsPopover','LocalStorageModule','ngCordova'])  
  2.   
  3. .run(function($ionicPlatform) {  
  4.   $ionicPlatform.ready(function() {  
  5.     if(window.cordova && window.cordova.plugins.Keyboard) {  
  6.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);  
  7.     }  
  8.     if(window.StatusBar) {  
  9.       StatusBar.styleDefault();  
  10.     }  
  11.   });  
  12. })  
  13.   
  14. .config(function($stateProvider, $urlRouterProvider) {  
  15.   $stateProvider  
  16.   
  17.      .state('tutorial', {  
  18.         url: '/',  
  19.         templateUrl: 'templates/tutorial.html',  
  20.         controller: 'TutorialCtrl'  
  21.      })  
  22.        
  23.      .state('sign', {  
  24.         url: '/sign',  
  25.         templateUrl: 'templates/sign.html',  
  26.         controller: 'SignCtrl'  
  27.      })  
  28.   
  29.     .state('app', {  
  30.       url: "/app",  
  31.       abstract: true,  
  32.       templateUrl: "templates/menu.html",  
  33.       controller: 'AppCtrl'  
  34.     })  
  35.   
  36.   
  37.     //通過菜單內(nèi)容頁面的name,把菜單和菜單內(nèi)容頁關(guān)聯(lián)起來  
  38.     .state('app.todolist', {  
  39.       url: "/todolist/:groupId",  
  40.       views: {  
  41.         'menuContent' :{  
  42.           templateUrl: "templates/todo_list.html",  
  43.           controller: 'TodolistsCtrl'  
  44.         }  
  45.       }  
  46.     })  
  47.   
  48.     .state('app.todolistedit', {  
  49.       url: "/todolist/edit/:groupId",  
  50.       views: {  
  51.         'menuContent' :{  
  52.           templateUrl: "templates/todo_list_edit.html",  
  53.           controller: 'TodolistsEditCtrl'  
  54.         }  
  55.       }  
  56.     })  
  57.   
  58.     .state('app.todoinfo', {  
  59.       url: "/todo/:todoId",  
  60.       views: {  
  61.         'menuContent' :{  
  62.           templateUrl: "templates/todo_info.html",  
  63.           controller: 'TodoCtrl'  
  64.         }  
  65.       }  
  66.     })  
  67.   
  68.     .state('app.grouplist', {  
  69.       url: "/group",  
  70.       views: {  
  71.         'menuContent' :{  
  72.           templateUrl: "templates/group_list.html",  
  73.           controller: 'GrouplistCtrl'  
  74.         }  
  75.       }  
  76.     })  
  77.   
  78.     .state('app.groupinfo', {  
  79.       url: "/group/:groupId",  
  80.       views: {  
  81.         'menuContent' :{  
  82.           templateUrl: "templates/group_info.html",  
  83.           controller: 'GroupCtrl'  
  84.         }  
  85.       }  
  86.     })  
  87.   
  88.     .state('app.search', {  
  89.       url: "/search",  
  90.       views: {  
  91.         'menuContent' :{  
  92.           templateUrl: "templates/search.html",  
  93.           controller: 'SearchCtrl'  
  94.         }  
  95.       }  
  96.     })  
  97.   
  98.     .state('app.settings', {  
  99.       url: "/settings",  
  100.       views: {  
  101.         'menuContent' :{  
  102.           templateUrl: "templates/settings.html",  
  103.           controller: 'SettingsCtrl'  
  104.         }  
  105.       }  
  106.     });  
  107.   
  108.   $urlRouterProvider.otherwise('/');  
  109. });  

3,菜單內(nèi)容頁面

主要就是關(guān)聯(lián)菜單的button,設(shè)置此屬性就行menu-toggle

  1. <ion-nav-buttons side="left">  
  2.     <button menu-toggle="left" class="button button-icon icon ion-navicon-round"></button>  
  3.     <button class="button button-icon icon ion-refresh" ng-show="groupId==1" ng-click="refresh()"></button>  
  4.   </ion-nav-buttons>  

效果圖(電腦瀏覽器的,手機(jī)也一樣)



二,下拉刷新

主要兩部分控制部分和頁面部分

1,頁面部分

ion-refresher刷新控件,on-refresh設(shè)置刷新方法,還有下拉文字,刷新文字,下拉效果圖

  1. <html ng-app="ionicApp">  
  2.   
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  6.   
  7.         <title>Ionic Pull to Refresh</title>  
  8.   
  9.         <link href="http://code./nightly/css/ionic.css" rel="stylesheet">  
  10.         <script src="http://code./nightly/js/ionic.bundle.js"></script>  
  11.         <script type="text/javascript" src="js/new_file2.js"></script>  
  12.         <link rel="stylesheet" type="text/css" href="css/new_file.css" />  
  13.   
  14.     </head>  
  15.   
  16.     <body ng-controller="MyCtrl">  
  17.   
  18.         <ion-header-bar class="bar-positive">  
  19.             <h1 class="title">Pull To Refresh</h1>  
  20.         </ion-header-bar>  
  21.         <!--ion-loading abcd四種效果-->          
  22.         <ion-content>  
  23.             <ion-refresher on-refresh="doRefresh()"  
  24.                            pulling-text="Pull to refresh..."   
  25.                            refreshing-text="Refreshing!"  
  26.                            refreshing-icon="ion-loading-b">  
  27.                   
  28.             </ion-refresher>  
  29.             <ion-list>  
  30.                 <ion-item ng-repeat="item in items">{{item}}</ion-item>  
  31.             </ion-list>  
  32.         </ion-content>  
  33.   
  34.     </body>  
  35.   
  36. </html>  

2,控制部分

主要就是控制完成刷新后,通知關(guān)閉刷新效果

[javascript] view plain copy
在CODE上查看代碼片派生到我的代碼片
  1. angular.module('ionicApp', ['ionic'])  
  2.   
  3. .controller('MyCtrl', function($scope, $timeout) {  
  4.   $scope.items = ['Item 1', 'Item 2', 'Item 3'];  
  5.     
  6.   $scope.doRefresh = function() {  
  7.       
  8.     console.log('Refreshing!');  
  9.     $timeout( function() {  
  10.       //simulate async response  
  11.       $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);  
  12.   
  13.       //Stop the ion-refresher from spinning  
  14.       $scope.$broadcast('scroll.refreshComplete');  
  15.       
  16.     }, 1000);  
  17.         
  18.   };  
  19.     
  20. });  

另外找到ionic的svg動(dòng)畫效果圖,可是不知道怎么加入



代碼html

  1. <html ng-app="ionicApp">  
  2.   <head>  
  3.     <meta charset="utf-8">  
  4.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  5.   
  6.     <title>Ionic Pull to Refresh</title>  
  7.   
  8.     <link href="http://code./nightly/css/ionic.css" rel="stylesheet">  
  9.     <script src="http://code./nightly/js/ionic.bundle.js"></script>  
  10.   
  11.     <link rel="stylesheet" type="text/css" href="css/new_file.css"/>  
  12.     <script type="text/javascript" src="js/new_file.js"></script>  
  13.   </head>  
  14.   <body ng-controller="MyCtrl">  
  15.   
  16.     <ion-header-bar class="bar-positive">  
  17.       <h1 class="title">Animated SVGs</h1>  
  18.     </ion-header-bar>  
  19.   
  20.     <ion-content>  
  21.       <p>  
  22.         <ion-spinner icon="android" ></ion-spinner>  
  23.         <ion-spinner icon="ios"></ion-spinner>  
  24.         <ion-spinner icon="ios-small"></ion-spinner>  
  25.         <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>  
  26.         <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>  
  27.       </p>  
  28.   
  29.       <p>  
  30.         <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>  
  31.   
  32.         <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>  
  33.         <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>  
  34.         <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>  
  35.         <ion-spinner icon="spiral"></ion-spinner>  
  36.       </p>  
  37.   
  38.   
  39.     </ion-content>  
  40.   
  41.   </body>  
  42. </html>  


css
  1. body {  
  2.   cursor: url('http:///img/finger.png'), auto;  
  3. }      
  4. p {  
  5.    text-align: center;  
  6.    margin-bottom: 40px !important;  
  7. }  
  8. .spinner svg {  
  9.   width: 19% !important;  
  10.   height: 85px !important;  
  11. }  

例1代碼下載 http://download.csdn.net/detail/superjunjin/8562153

例2代碼下載 http://download.csdn.NET/detail/superjunjin/8562139






    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产一区在线免费国产一区| 欧美日韩一级aa大片| 美国女大兵激情豪放视频播放 | 日本欧美三级中文字幕| 中文字幕日韩无套内射| 激情亚洲内射一区二区三区| 91人妻人澡人人爽人人精品| 中文字幕区自拍偷拍区| 美日韩一区二区精品系列| 久久三级国外久久久三级| 男人把女人操得嗷嗷叫| 人妻人妻人人妻人人澡| 国产在线日韩精品欧美| 亚洲精品日韩欧美精品| 亚洲国产av一二三区| 欧美亚洲美女资源国产| 欧美成人免费视频午夜色| 国产高清精品福利私拍| 又黄又爽禁片视频在线观看| 韩日黄片在线免费观看| 国产精品刮毛视频不卡| 在线视频三区日本精品| 久久午夜福利精品日韩| 国产内射一级二级三级| 人妻熟女欲求不满一区二区| 亚洲中文字幕在线视频频道| 日韩国产亚洲欧美另类| 亚洲一区二区福利在线| 成人国产激情福利久久| 久久热九九这里只有精品| 在线观看视频成人午夜| 国产精品亚洲二区三区| 中文字幕人妻日本一区二区 | 日本熟妇五十一区二区三区| 成人国产激情在线视频| 亚洲免费视频中文字幕在线观看| 男女激情视频在线免费观看| 日本女人亚洲国产性高潮视频| 欧洲一级片一区二区三区| 高清免费在线不卡视频| 爽到高潮嗷嗷叫之在现观看|