ionic tab页面使用

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ionic中,可以通过以下几种方法实现页面之间的值传递: 1. 通过路由传参 在路由跳转时,可以通过queryParams或者state来传递参数,例如: 在源页面: ```typescript import { Router } from '@angular/router'; constructor(private router: Router) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.router.navigate(['/destination'], { queryParams: params }); } ``` 在目标页面: ```typescript import { ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.queryParams.subscribe(params => { console.log(params); // { id: '123', name: 'John' } }); } ``` 2. 通过Ionic的NavController传参 在跳转页面时,可以通过NavController的navigateForward和navigateRoot方法传递参数,例如: 在源页面: ```typescript import { NavController } from '@ionic/angular'; constructor(private navCtrl: NavController) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.navCtrl.navigateForward('/destination', { queryParams: params }); } ``` 在目标页面: ```typescript import { NavController, NavParams } from '@ionic/angular'; constructor(private navCtrl: NavController, private navParams: NavParams) {} ngOnInit() { const params = this.navParams.get('queryParams'); console.log(params); // { id: 123, name: 'John' } } ``` 3. 通过localStorage或者sessionStorage存储值 在源页面: ```typescript localStorage.setItem('userId', '123'); ``` 在目标页面: ```typescript const userId = localStorage.getItem('userId'); console.log(userId); // '123' ``` 需要注意的是,这种方法可能会存在安全问题,因为存储在本地的数据可以被其他恶意网站或者插件访问和修改。 4. 通过Ionic的Events事件传递参数 在源页面: ```typescript import { Events } from '@ionic/angular'; constructor(private events: Events) {} goToDestinationPage() { const params = { id: 123, name: 'John' }; this.events.publish('destination:receivedParams', params); } ``` 在目标页面: ```typescript import { Events } from '@ionic/angular'; constructor(private events: Events) { events.subscribe('destination:receivedParams', (params) => { console.log(params); // { id: 123, name: 'John' } }); } ``` 需要注意的是,这种方法只适用于父子页面之间的值传递,如果需要在非父子关系的页面之间传递值,需要使用其他方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值