ionic tab页面使用

最新推荐文章于 2021-06-03 16:19:09 发布

sui_yz

最新推荐文章于 2021-06-03 16:19:09 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/79047395

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width" />
		<link href="lib/css/ionic.css" rel="stylesheet" />
		<script src="lib/js/ionic.bundle.js"></script>
		<script>
			var mapp=angular.module("modu",["ionic"]);
			mapp.controller("con",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="modu" ng-controller="con">
		
		<ion-tabs class="tabs-positive tabs-icon-top">
			
			<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
				<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>
					<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">
				<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">
				<div class="bar bar-header bar-stable bar-positive">
					<h2 class="title">八维在线教育</h2>
				</div>
			</ion-tab>
			
		</ion-tabs>
		
	</body>
</html>

sui_yz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic tab页面使用

var mapp=angular.module("modu",["ionic"]); mapp.controller("con",function($scope){ $scope.items=[1,2,3]; $scope.doRefresh = function() { $scope.items.push($scope.items.length + 1);
复制链接

扫一扫