一,側(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))
- <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>
- <!--主頁面內(nèi)容 關(guān)鍵的菜單內(nèi)容name要對應(yīng)到是菜單內(nèi)容的頁面-->
- <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
- </ion-side-menu-content>
- <!--側(cè)滑頁面-->
- <ion-side-menu side="left">
- <!--側(cè)滑頁面頂部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>
- <!--側(cè)滑頁面主要內(nèi)容-->
- <ion-content class="has-header">
- <ion-list>
- <!--item href的構(gòu)成:1,#本頁面 2,app本頁面鏈接 3,todolist/{{menu.groupId}}列表頁面鏈接(沒有冒號(hào))-->
- <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
在配置頁面記得,通過菜單內(nèi)容頁面的name,把菜單和菜單內(nèi)容頁關(guān)聯(lián)起來
對于菜單頁,設(shè)置的abstract: true,暫時(shí)作用是不可以跳轉(zhuǎn)到此頁面(即不可以跳轉(zhuǎn)到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'
- })
-
-
- //通過菜單內(nèi)容頁面的name,把菜單和菜單內(nèi)容頁關(guān)聯(lián)起來
- .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,菜單內(nèi)容頁面
主要就是關(guān)聯(lián)菜單的button,設(shè)置此屬性就行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>
效果圖(電腦瀏覽器的,手機(jī)也一樣)
![](http://image101.360doc.com/DownloadImg/2016/11/1523/84656918_3)
二,下拉刷新
主要兩部分控制部分和頁面部分
1,頁面部分
ion-refresher刷新控件,on-refresh設(shè)置刷新方法,還有下拉文字,刷新文字,下拉效果圖
- <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="http://code./nightly/css/ionic.css" rel="stylesheet">
- <script src="http://code./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,控制部分
主要就是控制完成刷新后,通知關(guān)閉刷新效果
- 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動(dòng)畫效果圖,可是不知道怎么加入
![](http://pubimage.360doc.com/wz/default.gif)
代碼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="http://code./nightly/css/ionic.css" rel="stylesheet">
- <script src="http://code./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:///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
|