ionic之底部bar-footer

今天药忘吃喽~ 2022-07-16 10:27 170阅读 0赞

1、实例背景

ionic标题是bar-header，副标题是bar-subheader，底部标题bar-footer

2、实现源码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>ionic之底部bar-footer</title>
    		<link rel="stylesheet" href="../css/ionic.css" />
    		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
    		<script>
    			var app = angular.module("footerApp",["ionic"]);
    			app.controller("footerController",function($scope){
    				$scope.header = "标题";
    				$scope.subheader = "副标题";
    				$scope.footer = "底部";
    			});
    		</script>
    	</head>
    	<body ng-app="footerApp" ng-controller="footerController">
    		<div class="bar bar-header bar-dark">
    			<label class="title">{
       {header}}</label>
    		</div>
    		<div class="bar bar-subheader bar-calm">
    			<label class="title">{
       {subheader}}</label>
    		</div>
    		<div class="bar bar-footer bar-energized">
    			<label class="title">{
       {footer}}</label>
    		</div>
    	</body>
    </html>

3、实现结果

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 ionic之快速启程（ionic-creator & ionic-lab）[附下载地址]

前言新手使用ionic最头疼的一共两个问题，一个是如何搭建一套符合程序员美感的产品框架，一个是http请求出现的诸多问题。笔者今天试用了一下ionic creato

柔情只为你懂/ 2022年09月25日 01:23/ 0 赞/ 215 阅读

相关 ionic实战之easyNote项目1.2（ionic源码）

前言原有的功能做完之后，虽然我是一个没什么美感的程序员，但看到自己的界面简直也是丑哭了。幸亏想起了不知道是哪位前辈说的话不会copy的程序员，不是一个好

妖狐艹你老母/ 2022年09月24日 14:23/ 0 赞/ 200 阅读

相关 ionic之实战2easyLife（ionic源码）

产品效果 ![这里写图片描述][20160810155859783] ![这里写图片描述][20160810155907846] ![这里写图片描述][2016081

青旅半醒/ 2022年07月19日 05:28/ 0 赞/ 187 阅读

相关 ionic之无序列表

1、实例背景 ionic无序列表利用的是ul-li实现，无序列表内容用的是AngularJS赋值，样式用class="list"和class="item"

迷南。/ 2022年07月16日 12:39/ 0 赞/ 238 阅读

相关 ionic之样式button

1、实例背景 ionic中常见的按钮button，设置按钮样式用class="button"，这个是设置普通样式 2、实现源码 <!DOCTY

我就是我/ 2022年07月16日 12:39/ 0 赞/ 231 阅读

相关 ionic之底部bar-footer

1、实例背景 ionic标题是bar-header，副标题是bar-subheader，底部标题bar-footer 2、实现源码 <!DOC

今天药忘吃喽~/ 2022年07月16日 10:27/ 0 赞/ 171 阅读

相关 ionic之样式bar-energized

1、实例背景 ionic头部bar-header，设置样式bar-energized 2、实现源码 <!DOCTYPE html> <

向右看齐/ 2022年07月16日 09:47/ 0 赞/ 212 阅读

相关 ionic之切换开关

1、实例背景 ionic切换开关toggle，设置样式用的是toggle-calm、toggle-light等 2、实现源码 <!DOCTYP

客官°小女子只卖身不卖艺/ 2022年07月15日 15:19/ 0 赞/ 213 阅读

相关 ionic隐藏底部tab菜单

![20181101141403582.png][] ![20181101141426371.png][] ![20181101141458597.png][]

水深无声/ 2022年04月22日 01:34/ 0 赞/ 287 阅读

相关 ionic 页面滚动到底部方法

强列推荐先看这篇译文《[angular4 滚动事件][angular4]》 You’re trying to call a component method befo

骑猪看日落/ 2022年04月08日 18:13/ 0 赞/ 415 阅读