ionic的侧滑和下拉刷新效果

一，侧滑效果

主要涉及到三个地方

1，菜单页面

主要分为主页面和侧滑页面两部分，又分别都包含顶部bar和主要内容部分

注意：主页面内容部分，关键的菜单内容name要对应到是菜单内容的页面（在app.js中，下面会贴出）

          item href的构成：1，#本页面  2，app本页面链接   3，todolist/{{menu.groupId}}列表页面链接（没有冒号）

  
  
    
    
      
    
    
    
  
  
  
    
    
      
需求
      

        
      
    
    
    
      
        
        
        
            {{menu.title}} {{menu.badge}}
        
      
    
    
  

2，app.js

在配置页面记得，通过菜单内容页面的name，把菜单和菜单内容页关联起来

对于菜单页，设置的abstract: true，暂时作用是不可以跳转到此页面（即不可以跳转到menu.html）

angular.module('todo.io', ['ionic', 'todo.io.directives', 'todo.io.filters', 'todo.io.services', 'todo.io.controllers', 'nsPopover','LocalStorageModule','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

     .state('tutorial', {
        url: '/',
        templateUrl: 'templates/tutorial.html',
        controller: 'TutorialCtrl'
     })
     
     .state('sign', {
        url: '/sign',
        templateUrl: 'templates/sign.html',
        controller: 'SignCtrl'
     })

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })


    //通过菜单内容页面的name，把菜单和菜单内容页关联起来
    .state('app.todolist', {
      url: "/todolist/:groupId",
      views: {
        'menuContent' :{
          templateUrl: "templates/todo_list.html",
          controller: 'TodolistsCtrl'
        }
      }
    })

    .state('app.todolistedit', {
      url: "/todolist/edit/:groupId",
      views: {
        'menuContent' :{
          templateUrl: "templates/todo_list_edit.html",
          controller: 'TodolistsEditCtrl'
        }
      }
    })

    .state('app.todoinfo', {
      url: "/todo/:todoId",
      views: {
        'menuContent' :{
          templateUrl: "templates/todo_info.html",
          controller: 'TodoCtrl'
        }
      }
    })

    .state('app.grouplist', {
      url: "/group",
      views: {
        'menuContent' :{
          templateUrl: "templates/group_list.html",
          controller: 'GrouplistCtrl'
        }
      }
    })

    .state('app.groupinfo', {
      url: "/group/:groupId",
      views: {
        'menuContent' :{
          templateUrl: "templates/group_info.html",
          controller: 'GroupCtrl'
        }
      }
    })

    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "templates/search.html",
          controller: 'SearchCtrl'
        }
      }
    })

    .state('app.settings', {
      url: "/settings",
      views: {
        'menuContent' :{
          templateUrl: "templates/settings.html",
          controller: 'SettingsCtrl'
        }
      }
    });

  $urlRouterProvider.otherwise('/');
});

3，菜单内容页面

主要就是关联菜单的button，设置此属性就行menu-toggle

效果图（电脑浏览器的，手机也一样）

二，下拉刷新

主要两部分控制部分和页面部分

1，页面部分

ion-refresher刷新控件，on-refresh设置刷新方法，还有下拉文字，刷新文字，下拉效果图

	
		
		

		

		
		
		
		

	

	

		
			
Pull To Refresh
		
                
		
			
				
			
			
				{{item}}
			
		

	

2，控制部分

主要就是控制完成刷新后，通知关闭刷新效果

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];
  
  $scope.doRefresh = function() {
    
    console.log('Refreshing!');
    $timeout( function() {
      //simulate async response
      $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    
    }, 1000);
      
  };
  
});

另外找到ionic的svg动画效果图，可是不知道怎么加入

代码html

  
    
    

    

    
    

    
    
  
  

    
      
Animated SVGs
    

    
      

        
        
        
        
        
      

      

        

        
        
        
        
      


    

  

css

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}    
p {
   text-align: center;
   margin-bottom: 40px !important;
}
.spinner svg {
  width: 19% !important;
  height: 85px !important;
}

例1代码下载 http://download.csdn.net/detail/superjunjin/8562153

例2代码下载 http://download.csdn.net/detail/superjunjin/8562139