ionic的侧滑和下拉刷新效果

superjunjin

墨衍会员 · AI 创作全网分发码龄17年

关注

原创最新推荐文章于 2025-09-06 08:04:38 发布 4.4w 阅读 AI 写同款· GEO 优化 ›

ionic side menu侧滑效果 ionic side menu侧滑效果demo 立即下载

一，侧滑效果

主要涉及到三个地方

1，菜单页面

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

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

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

<ion-side-menus>
  <!--主页面-->
  <ion-side-menu-content class="bar-positive">
    <!--主页面顶部bar-->
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i></ion-nav-back-button>
    </ion-nav-bar>
    <!--主页面内容 关键的菜单内容name要对应到是菜单内容的页面-->
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>
  <!--侧滑页面-->
  <ion-side-menu side="left">
    <!--侧滑页面顶部bar-->
    <ion-header-bar align-title="center" class="bar-dark">
      <h1 class="title">需求</h1>
      <div class="buttons pull-right" nav-clear menu-close ng-click="settings()">
        <button class="button button-icon icon ion-gear-b"></button>
      </div>
    </ion-header-bar>
    <!--侧滑页面主要内容-->
    <ion-content class="has-header">
      <ion-list>
        <!--item href的构成：1，#本页面  2，app本页面链接   3，todolist/{{menu.groupId}}列表页面链接（没有冒号）-->
        <ion-item nav-clear menu-close ng-repeat="menu in menus" href="#/app/todolist/{{menu.groupId}}">
        
          <i class="icon ion-android-clock"></i>  {{menu.title}} <span class="badge" ng-if="menu.badge>0">{{menu.badge}}</span>
        </ion-item>
      </ion-list>
    </ion-content>
    
  </ion-side-menu>
</ion-side-menus>

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

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

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

二，下拉刷新

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

1，页面部分

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

<html ng-app="ionicApp">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

		<title>Ionic Pull to Refresh</title>

		<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
		<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
		<script type="text/javascript" src="js/new_file2.js"></script>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />

	</head>

	<body ng-controller="MyCtrl">

		<ion-header-bar class="bar-positive">
			<h1 class="title">Pull To Refresh</h1>
		</ion-header-bar>
        <!--ion-loading abcd四种效果-->        
		<ion-content>
			<ion-refresher on-refresh="doRefresh()"
			               pulling-text="Pull to refresh..." 
			               refreshing-text="Refreshing!"
			               refreshing-icon="ion-loading-b">
				
			</ion-refresher>
			<ion-list>
				<ion-item ng-repeat="item in items">{{item}}</ion-item>
			</ion-list>
		</ion-content>

	</body>

</html>

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

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

    <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    <script type="text/javascript" src="js/new_file.js"></script>
  </head>
  <body ng-controller="MyCtrl">

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

    <ion-content>
      <p>
        <ion-spinner icon="android" ></ion-spinner>
        <ion-spinner icon="ios"></ion-spinner>
        <ion-spinner icon="ios-small"></ion-spinner>
        <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
        <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
      </p>

      <p>
        <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>

        <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
        <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
        <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
        <ion-spinner icon="spiral"></ion-spinner>
      </p>


    </ion-content>

  </body>
</html>

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.youkuaiyun.com/detail/superjunjin/8562153

例2代码下载 http://download.youkuaiyun.com/detail/superjunjin/8562139