<!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>
ionic tab页面使用
最新推荐文章于 2022-08-24 09:57:15 发布