tab页面切换

最新推荐文章于 2019-08-22 10:22:09 发布

Ason_haiyu

最新推荐文章于 2019-08-22 10:22:09 发布

阅读量351

点赞数

本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79038378

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="lib/css/ionic.css" rel="stylesheet" />
		<script src="lib/js/ionic.bundle.js"></script>
		<script>
			angular.module("gaoyn", ["ionic"]).controller("democ", function($scope) {

			}).controller("item1", function($scope) {

				$scope.items = [1, 2, 3];
				$scope.doRefresh = function() {
					$scope.items.push($scope.items.length + 1);
					// 停止广播ion-refresher
					$scope.$broadcast('scroll.refreshComplete');
				}
			})
		</script>
	</head>

	<body ng-app="gaoyn" ng-controller="democ">
		<ion-tabs class="tabs-positive tabs-icon-only">

			<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
				<!-- 标签 1 内容 -->
				<ion-header-bar class="bar-positive">
					<button class="button button-icon">左侧按钮</button>
					<h2 class="title">八维商城</h2>
					<button class="button button-icon">右按钮</button>
				</ion-header-bar>

				<!-- 内容区域 -->
				<ion-content ng-controller="item1">
					<ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()">
					</ion-refresher>
					<ion-list>
						<ion-item ng-repeat="item in items">{{item}}</ion-item>
					</ion-list>
				</ion-content>
			</ion-tab>

			<ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
				<!-- 标签 2 内容 -->
				<ion-header-bar class="bar-positive">
					<h2 class="title">八维网站</h2>
				</ion-header-bar>
			</ion-tab>

			<ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
				<!-- 标签 3 内容 -->
				<ion-header-bar class="bar-positive">
					<h2 class="title">八维在线教育</h2>
				</ion-header-bar>
			</ion-tab>

		</ion-tabs>
	</body>

</html>

Ason_haiyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab页面切换

angular.module("gaoyn", ["ionic"]).controller("democ", function($scope) { }).controller("item1", function($scope) { $scope.items = [1, 2, 3]; $scope.doRefresh = function() { $scope.i
复制链接

扫一扫