h5移动开发，ionic实现滑动切换

来源：互联网发布：搜索算法open表close表编辑：程序博客网时间：2024/05/22 18:42

1.node.j、ionic、cordova、ant、安装见官网http://www.ionic.wang/start-index.html

2.效果图

3.建一个空白模板：

$ ionic start myApp blank ,

添加平台（以安卓为例）:

$ cd myApp$ionic platform add android

4.代码

1.配置app.js

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.position('bottom');$ionicConfigProvider.platform.android.tabs.style('standard');$ionicConfigProvider.platform.android.tabs.position('bottom');//底部显示$urlRouterProvider.otherwise('/home');$stateProvider.state('home', {    url: '/home',     templateUrl:'templates/tab-home.html', // 这个是模板位置    controller: 'homeCtrl' // 这个是对应模板的controller名称！记住是名称不是位置});});

2.index.html 重点代码

<body ng-app="starter">    <ion-nav-view></ion-nav-view><!--导航 -->      </body>

3.tab-home.html 代码

<ion-view view-title="首页" hide-nav-bar="true">  <ion-content >  <ion-header-bar align-title="center" class="bar-positive">  <div class="buttons">    <button class="button" ng-click="doSomething()">左侧按钮</button>  </div>  <h1 class="title" id="title_text">首页</h1>  <div class="buttons">    <button class="button">右侧按钮</button>  </div></ion-header-bar>  <div class="padding"><ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false" does-continue="true" ><ion-slide>  <div class="box blue"><h1>首页</h1></div></ion-slide><ion-slide>  <div class="box yellow"><h1>内容</h1></div></ion-slide><ion-slide>  <div class="box pink"><h1>关于</h1></div></ion-slide><ion-slide>  <div class="box pink"><h1>设置</h1></div></ion-slide></ion-slide-box></div>  </ion-content>    <ion-tabs class="tabs-icon-left tabs-color-active-assertive tabs-balanced">   <ion-tab title="首页" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" on-select="onShowYeSelected()">  </ion-tab>   <ion-tab title="内容" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" on-select="onContentSelected()">  </ion-tab>   <ion-tab title="关于" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select="onAboutSelected()">  </ion-tab>      <ion-tab title="设置" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select="onSettingSelected()">  </ion-tab></ion-tabs></ion-view>

4.controllers 代码

angular.module('starter.controllers', []).controller('homeCtrl', function($scope,$ionicTabsDelegate,$ionicSlideBoxDelegate ) {var title_id=document.getElementById("title_text");$scope.slideHasChanged=function(index){$ionicTabsDelegate.select(index);}$scope.onShowYeSelected=function(){title_id.innerHTML="首页";$ionicSlideBoxDelegate.slide(0,[1000]);}$scope.onContentSelected=function(){title_id.innerHTML="内容";$ionicSlideBoxDelegate.slide(1,[1000]);}$scope.onAboutSelected=function(){title_id.innerHTML="关于";$ionicSlideBoxDelegate.slide(2,[1000]);}$scope.onSettingSelected=function(){title_id.innerHTML="设置";$ionicSlideBoxDelegate.slide(3,[1000]);}});

5.下载源码（源码添加了android环境，看起来比较大，其实打包很小）

0 0