ionic 简单应用下拉刷新 选项卡栏操作 滚动条
来源：互联网 发布：linux sacc 编辑：程序博客网 时间：2024/06/05 02:19
!DOCTYPE html>
//下拉刷新
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<ion-view title="Home" hide-nav-bar="true">
<!--滚动条-->
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 1000px;height: 1000px;">
<!--下拉刷新-->
<ion-content>
<ion-refresher pulling-text="下拉刷新" on-refresh="shua()"></ion-refresher>
<ion-list class="list">
<ion-item class="item" ng-repeat="a in aa track by $index">{{a}}</ion-item>
</ion-list>
</ion-content>
</div>
</ion-scroll>
</ion-view>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope,$http){
$scope.aa=["李四","王五"];
//刷新的方法
$scope.shua=function(){
//通过服务获取数据
$http.get("data/data1.json").then(function(req){
//接收数据
var dd=req.data;
for (var i = 0; i < dd.length; i++) {
$scope.aa.push(dd[i].name);
}
//发送广播
$scope.$broadcast('scroll.refreshComplete');
});
};
});
</script>
</body>
</html>
//选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<!--选项卡栏操作-->
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Aa">
<header class="bar bar-header bar-positive">
<h2 class="title">Sett</h2>
</header><br /> <br />
<center>
<ul class="list">
<li class="item">我</li>
<li class="item">爱</li>
<li class="item">你</li>
</ul>
</center>
</ion-tab>
<ion-tab title="Bb">
<header class="bar bar-header bar-positive">
<h2 class="title">Tasks</h2>
</header><br /> <br />
<center>
<ul class="list">
<li class="item">你</li>
<li class="item">爱</li>
<li class="item">我</li>
</ul>
</center>
</ion-tab>
</ion-tabs>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope){
});
</script>
</body>
</html>
//侧拉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<!--侧栏菜单-->
<ion-side-menus>
<!--
左侧内容
-->
<ion-side-menu side="left">
<ul>
<li>zhangsan</li>
</ul>
</ion-side-menu>
<!--
中间 的内容
-->
<ion-side-menu-content>
<div class="content">
我是中间内容
</div>
</ion-side-menu-content>
<!--
右侧
-->
<ion-side-menu side = "right">
<ul>
<li>我是右侧的zhangsan</li>
</ul>
</ion-slide-menu>
</ion-side-menu>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope){
});
</script>
</body>
</html>
- ionic 简单应用下拉刷新 选项卡栏操作 滚动条
- ionic 简单应用下拉刷新 选项卡栏操作 滚动条
- ionic简单的选项卡操作
- ionic选项卡操作
- AngularJS的ionic（侧拉、选项卡、list展示、上拉加载、下拉刷新）
- ionic滚动条 左右滑动上拉刷新
- ionic 下拉刷新
- AngularJS + Ionic 下拉刷新
- ionic 下拉刷新
- ionic refresher(下拉刷新)
- ionic 下拉刷新
- ionic下拉刷新
- Ionic 下拉刷新
- ionic的下拉刷新
- ionic 下拉刷新
- ionic实现下拉刷新
- ionic 下拉刷新
- ionic滚动条
- MyBaties框架
- linux cpu性能测试
- android 混淆打包-最全proguard-rules.pro
- scala 2.11.7学习笔记1之概述
- 如何用Spring AOP和Java自定义注解实现登陆鉴权
- ionic 简单应用下拉刷新 选项卡栏操作 滚动条
- 图像多尺度技术
- Oracle Database JDBC驱动下载
- protobuf 数据解析的2种方法
- CefGlue 增加对 F12 弹出 开发者工具 （devTools）的支持
- 初识lldp协议
- Day019
- 中国IT行业为何频获风投青睐？
- 数据结构
