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

最新推荐文章于 2024-04-28 17:18:09 发布

黑色的眼

最新推荐文章于 2024-04-28 17:18:09 发布

阅读量5.3k

点赞数

分类专栏： h5混合开发

本文链接：https://blog.csdn.net/u013087907/article/details/53814727

版权

h5混合开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
h5移动开发，ionic实现滑动切换

1.node.j、ionic、cordova、ant、安装见官网http://www.ionic.wang/start-index.html2.效果图3.建一个空白模板：$ ionic start myApp blank ,添加平台（以安卓为例）:$ cd myApp$ionic platform add android4.代码1.配置app
复制链接

扫一扫