ionic

最新推荐文章于 2020-06-17 00:44:10 发布

yin_chenglong

最新推荐文章于 2020-06-17 00:44:10 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/80077979

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,
	minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
	<!--
	导入ionic环境
	-->
	<link rel="stylesheet" href="css/ionic.min.css" />
	<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>

	<title></title>
	<script type="text/javascript">
	//注入引入ionic框架
	var app = angular.module("myApp",['ionic']);
	app.controller("myCtrl",function($scope){
	$scope.names = ["刘备","张飞","关羽"];

	$scope.dosomething1 = function(){
	alert("点击了左按钮");
	};
	$scope.dosomething2 = function(){
	alert("点击了右按钮");
	};
	})
	</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	<!--
	定义hearder头部
	-->
	<ion-header-bar align-title="center" class="bar-positive">
	<div class="buttons">
	<button class="button" ng-click="dosomething1();">左按钮</button>
	</div>
	<span class="title">1603L商城</span>
	<div class="buttons">
	<button class="button" ng-click="dosomething2();">右按钮</button>
	</div>
	</ion-header-bar>
	<ion-content>
	<h6>下面是列表</h6>
	<table border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px">
	<tr><td>序号</td><td>名字</td></tr>
	<tr ng-repeat="n in names">
	<td>{{$index}}</td>
	<td>{{n}}</td>
	</tr>
	</table>
	</ion-content>
	<ion-footer-bar align-title="center" class="bar-assertive">
	<div class="buttons">
	<button class="button">左下按钮</button>
	</div>
	<span class="title">联系我们</span>
	<div class="buttons">
	<button class="button">右下按钮</button>
	</div>
	</ion-footer-bar>
	</body>
	</html>

需要在css中添加一个icon文档

yin_chenglong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user
复制链接

扫一扫