ionic tab页面使用

最新推荐文章于 2022-08-24 09:57:15 发布
最新推荐文章于 2022-08-24 09:57:15 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
    评论
tab页面切换
Ason_haiyu的博客
01-11 361
angular.module("gaoyn", ["ionic"]).controller("democ", function($scope) { }).controller("item1", function($scope) { $scope.items = [1, 2, 3]; $scope.doRefresh = function() { $scope.i
ionic4自定义底部Tab五个按钮的样式（按钮凸起效果）
zebraMeat的博客
11-26 1169
ionic4自定义底部Tab五个按钮的样式效果图实现代码 效果图 实现代码 tabs.page.html代码. <ion-tabs (ionTabsDidChange)="tabchange($event)"> <ion-tab-bar slot="bottom" translucent="true"> <ion-tab-button tab="t...
ionic中tab切换注意事项
u011649976的博客
02-05 4066
工作过程中遇到的问题做一个简单的记录，方便后来者和自己以后查阅。 ionic tab切换默认返回上一个tab。其实tab是同级的，这样是有问题的。 解决办法其实很简单： $state.go(to,params,optioins);其实是有三个参数。第一个参数是目标页面，第二个参数是页面之间参数传递，第三个参数是一些配置 option 中有几个option ：location，inherit
ionic2 tab切换控制
Summer的博客
06-29 4784
一、ion-tabs   ion-tabs上有ionchange事件，每次界面切换都会调用这个函数 二、ion-tab  ion-tab里面没有click事件，这对于一些业务处理很不方便。例如点击底部的tab导航，如果用户没有登入，那么跳转到登入界面，虽然可以在 ion-tabs的iochange事件里面写，但是这样会先切换到ion-tab对应的那个界面，再跳转到登入界面，这样体验很不
ionic3 自定义cordova插件的开发和调用（包含jar包调用，文件结构详解）
yang__Y的博客
08-24 673
ionic3 自定义插件的开发和调用（包含jar包调用，文件结构详解）
使用ionic切换页面卡顿的解决方法
08-31
在使用Ionic框架构建移动应用时，用户可能会遇到页面切换时动画卡顿的问题，这严重影响了应用的用户体验。为了解决这一问题，我们可以采用Cordova提供的`cordova-plugin-NativePageTransitions`插件来实现更流畅的...
ionic 自定义tab切换
05-06
在本文中，我们将深入探讨如何在 Ionic 框架中实现自定义的 Tab 切换功能。Ionic 是一个流行的开源框架，它基于 Angular，并专为移动应用开发设计，提供了丰富的 UI 组件，其中包括 Tab 控件。自定义 Tab 切换可以让...
ionic2 tabs使用 Modal底部tab弹出框
08-31
在开发Ionic 2应用程序时，有时我们可能需要创建一些非标准的导航体验，例如在底部tab栏中点击某个选项时不切换子页面，而是弹出一个新的模态窗口。本篇文章将详细讲解如何在Ionic 2中利用Modal实现这种底部tab弹出...
04 ionic新增tab切换页面 去掉二级页面tabs菜单，修改返回按钮-avi.rar
04-09
在本教程中，我们将深入探讨如何在Ionic框架中创建一个新的tab切换页面，并针对特定场景去掉二级页面的tabs菜单，同时修改返回按钮的行为。Ionic是一款基于Angular的开源移动应用框架，它提供了一套丰富的组件和工具...
ionic4自定义tabs导航栏（一）
yw00yw的博客
07-03 2671
在ionic4项目中，使用ionic start myApp tabs可以新建自带tab切换，但是更多时候我们想自定义tab切换，自定义项目目录结构。 1. 新建一个空白项目 ionic start ionic-demo03 blank 2. 在pages文件夹下新建一个tabs页面 ionic g page pages/tabs 3. 在tabs页面目录下创建tabs.router.mod...
ionic实现可滑动的tab选项卡切换效果
09-01
主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ionic4自定义tabs切换.zip
07-03
使用angular路由自定义ionic4中的tabs切换，因为在实际项目中，需要自定义项目目录，需要手动定义tabs。
ionic组件ion-tabs选项卡切换效果实例
09-01
主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ionic入门教程第九课-开始动手做项目吧！ion-nav-bar、ion-nav-buttons、ion-tabs
https://github.com/xiaohuoni
04-18 7878
前面说了八节课，又从框架上讨论ionic的，也有从代码结构上讨论的， 但是我仔细看了看，对于新手并没有真正的开始做项目，反而对那些对ionic有一定了解的朋友有一定的帮助。 所以我觉得从头开始带着大家完成一个比较完整的项目。 由于这是一个前端的教程，所以我只讲前端的内容。 UI是借用了福州知名的UI设计师唐力娜的设计，万分感谢。 接口的话，这次课程，为了让大家能够理解或者更为熟悉如何从服
ionic入门教程第十八课-初识自定义指令directive oni-bar（tab-bar）
https://github.com/xiaohuoni
06-08 7083
经过这么长时间的学习，我想大家都有了一定的基础了。 这节课尝试着给大家讲点更加深入的东西，能理解的就好好学学，还理解不来的朋友也没有可以当做扩展阅读看看就好。 学习切忌过于急躁。 到目前为止，我教程里面提到的内容都是使用了ionic的内置指令和一些angularjs的内置指令来实现的。如ion-nva-bar、ion-list、ion-nav-view和ng-repeat、ng-bind等
ionic4 自定义tabbar图标
僵小蛋的博客
08-22 671
<ion-tabs> <ion-tab-bar slot="bottom" class="tabbar"> <ion-tab-button tab="home" class="tab-button"> <ion-icon name="" class="icon-home"></ion-icon> &l...
ionic3之tabs用法详解
阿龙的博客
01-29 1万+
[root] Page 指定tab希望加载的页面 tabTitle string tab上显示的标题 tabIcon string tab上显示的图标 tabBadge string tab上显示的角标数字 tabBadgeStyle string 角标数字的颜色 enabled boolean tab是否可用，默认为tru
Ionic基础——ion-tap选项卡及路由结合ion-tap详解
热门推荐
bboyjoe的博客
02-16 1万+
一.选项卡 : ion-tabs简单介绍 使用ion-tabs指令声明选项卡，使用ion-tab声明选项页：  ... ... ... 每个ion-tab元素的title属性值将作为选项页的标题其 内容将填充选项卡书签栏之外的剩余区域（被应用.pane样式）。 注意： 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-vie
Ionic自定义插件开发(附Demo)
cangahi09025566的博客
05-09 4146
前言 ionic是目前比较火的一个移动端混合开发框架.其中插件开发是其实现混合开发的主要方式.这里我就大概记录下自己自定义插件的一些心得.如有不好之处,还望各位看官指出。     创建自定义插件 1.安装plugman,该工具主要用于创建一个自定义的插件 npm install -g plugman 2.创建一个插件框架---例如:plugman creat --name 插件名字...
ionic使用angluar页面之间的值传递
最新发布
04-04
在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、付费专栏及课程。

余额充值