ionic简单应用加列表

最新推荐文章于 2018-05-27 20:40:57 发布

sui_yz

最新推荐文章于 2018-05-27 20:40:57 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/79044168

版权

本文通过一个具体实例展示了如何使用Ionic框架创建一个包含下拉刷新功能的应用。该应用集成了AngularJS来实现动态数据更新，并利用了Ionic提供的UI组件，如Header Bar、Content区块、Footer Bar等。同时介绍了如何设置Header Bar上的按钮以及如何实现列表项的动态加载。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="lib/css/ionic.css" rel="stylesheet" />
		<script src="lib/js/ionic.bundle.js"></script>
		<script>
			var myapp=angular.module("modu",["ionic"]);
			myapp.controller("con",function($scope){
				$scope.items=[1,2,3];
				$scope.dorefresh=function(){
					$scope.items.push($scope.items.length+1);
					$scope.$broadcast("scroll.refreshComplete");
				}
			})
			
		</script>
	</head>
	<body ng-app="modu" ng-controller="con">
		<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>
			<img src="../day03_video/img/aa.jpg" width="300"/>
			<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-footer-bar class="bar-assertive">
			<h2 class="title">本商城由八维公司负责</h2>
		</ion-footer-bar>
		
	</body>
</html>