Ionic中基于js的扩展(指令和服务)来实现各种效果
1、ion-header-bar ion-footer-bar ion-content
align-title='left/ritght/center
<body>
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">header</h1>
</ion-header-bar>
<ion-content
ng-controller="myCtrl"
scroll="false"
>
<!--
* overflow-scroll:false 是否使用默认滚动条
* scroll:true 是否允许滚动
-->
<ul class="list">
<li class="item" ng-repeat="temp in list">
{{temp}}
</li>
</ul>
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.list = [];
for (var i = 0; i < 100; i++) {
$scope.list.push(i);
}
}])
</script>
2、ion-refresher 下拉刷新
ion-refresher作为ion-content的第一个元素
<ion-refresher pulling-text='下拉刷新' on-refresh='refresh()'>
</ion-refresher>
结束刷新动作：
$scope.$broadcast('scroll.refreshComplete');
<body>
<ion-header-bar>
<h1 class="title">header</h1>
</ion-header-bar>
<!--下拉刷新组件-->
<ion-content ng-controller="myCtrl">
<ion-refresher on-refresh="refresh()" pulling-text="下拉加载"></ion-refresher>
<ul class="list">
<li class="item" ng-repeat="temp in list">{{temp}}</li>
</ul>
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.list = [4, 3, 2, 1, 0];
$scope.refresh = function () {
$scope.list.unshift($scope.list.length);
$scope.$broadcast('scroll.refreshComplete');
}
}]);
</script>
3、ion-infinite-scroll 上拉加载更多
ion-infinite-scroll作为ion-content的最后一个元素
<ion-infinite-scroll on-infinite='loadMore()' immediate-check='false'>
</ion-infinite-scroll>
结束加载更多的动作
$scope.$broadcast('scroll.infiniteScrollComplete');
<body>
<ion-header-bar>
<h1 class="title">header</h1>
</ion-header-bar>
<ion-content ng-controller="myCtrl">
<p>Hello</p>
<ul class="list list-inset">
<li class="item" ng-repeat="tmp in list track by $index">{{tmp}}</li>
</ul>
<!--下拉加载更多-->
<ion-infinite-scroll on-infinite="loadMore()" immediate-check="false"></ion-infinite-scroll>
<!--
immediate-check="false"
禁止自动检查 默认为true 数据初始化会自动触发 loadMore
-->
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl',['$scope','$timeout', function ($scope,$timeout) {
$scope.list = [0,1,2,3,4];
$scope.loadMore = function () {
$scope.list.push($scope.list.length);
$timeout(function(){
$scope.$broadcast('scroll.infiniteScrollComplete');
},1000) }
}]);
</script>
</body>
4、$ionicScrollDelegate 处理和滚动的方法
方法：scrollTop\scrollBottom\scrollTo\getScrollPosition()
<body ng-controller="myCtrl">
<ion-header-bar>
<h1 class="title">header</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item" ng-repeat="i in list">{{i}}</li>
</ul>
</ion-content>
<ion-footer-bar>
<button class="button button-positive" ng-click="goTop()">goTop</button>
<button class="button button-assertive" ng-click="goBottom()">goBottom</button>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl', ['$scope', '$ionicScrollDelegate',
function ($scope, $ionicScrollDelegate) {
$scope.list = [];
for (var i = 0; i < 50; i++) {
$scope.list.push(i);
}
// 滚动到顶部----》 params true :开启动画
$scope.goTop = function () {
$ionicScrollDelegate.scrollTop(true);
};
// 滚动到底部
$scope.goBottom = function () {
$ionicScrollDelegate.scrollBottom(true);
};
// 获得当前滚动位置信息
// 返回一个对象
// .top
// .left
$scope.getScrollPosition = function () {
var obj = $ionicScrollDelegate.getScrollPosition()
console.log(obj.top);
};
// 滚动到指定位置
// scrollTo(left,top,是否开启动画)
$scope.set = function () {
$ionicScrollDelegate.scrollTo(0,540,true);
}
}]);
</script>
</body>
5、ionTabs
<ion-tabs class='tabs-positive tabs-icon-left/right/only'></ion-tabs>
<ion-tab title='123' ng-click='func1()' icon-on/off=''>
<!--<ion-content>-->
<!--
* ion-tabs 不能放入 一个 ion-content 中
* ion-tabs 选项卡区域默认在底部
-->
<!--</ion-content>-->
<ion-tabs class="tabs-positive tabs-icon-left">
<ion-tab title="音乐" icon="ion-headphone" ng-click="fun1()">
<!--icon-in icon-off-->
<ion-view>
<ion-content class="energized-bg">
<h1>这里是音乐的页面</h1>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="游戏" icon="ion-ios-game-controller-b-outline">
<ion-view>
<ion-content class="positive-bg">
<h1>这里是游戏的页面</h1>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
6、侧边栏菜单(面板、抽屉)
<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side='left/right' width=''></ion-side-menu>
</ion-side-menus>
方式1：扩展属性
menu-toggle='left/right'
menu-close
方式2：js的方式
$ionicSideMenuDelegate:
toggleLeft(true/false)
toggleRight(true/false)
isOpenLeft/right()
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar>
<button class="button badge-positive icon ion-navicon" menu-toggle="left"></button>
<h1 class="title">header</h1>
<button class="button button-assertive" ng-click="show(true)">打开右边菜单</button>
</ion-header-bar>
<ion-content>
<h2>Hello sideMenu</h2>
</ion-content>
</ion-side-menu-content> <!--从左边打开的侧边栏菜单-->
<ion-side-menu side="left">
<button ng-click="show(false)" class="button icon ion-close"></button>
<ul class="list">
<li class="item">个人中心</li>
<li class="item">关于</li>
<li class="item">设置</li>
</ul>
</ion-side-menu> <!--从右边打开的侧边栏菜单-->
<ion-side-menu side="right">
<button class="button button-positive" menu-close="">点击关闭</button>
</ion-side-menu>
</ion-side-menus>
<script src="js/ionic.bundle.min.js"></script>
<script>
/*
* $ionicSideMenuDelegate
*
* toggleLeft/Right
* isOpen/Left/Right
*
* */
angular
.module('myApp', ['ionic'])
.controller('myCtrl',['$scope','$ionicSideMenuDelegate', function
($scope,$ionicSideMenuDelegate) {
$scope.show = function (arg) {
$ionicSideMenuDelegate.toggleRight(arg);
}
}])
</script>
7、$ionicModal 自定义弹窗
$ionicModal.fromTemplate/fromTemplateUrl('url',{scope:$scope}).then(function(modall){})
<body ng-controller="myCtrl">
<script id="myModal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1>Header</h1>
</ion-header-bar>
<ion-content>
<h3>Hello $iocnModal</h3>
</ion-content>
</ion-modal-view>
</script> <ion-header-bar>
<h1 class="title">header</h1>
</ion-header-bar>
<ion-content>
<p>page</p>
<button class="button button-positive" ng-click="openModal()">打开一个弹窗</button>
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl',['$scope','$ionicModal', function ($scope,$ionicModal) {
$scope.openModal = function () {
$ionicModal.fromTemplateUrl('myModal.html',{
scope:$scope
// 指定数据作用域
})
.then(function (modal) {
// 获得实例
$scope.modal = modal;
$scope.modal.show();
})
}
}]);
</script>
</body>
8、$ionicActionSheet 操作表
$ionicActionSheet.show({
buttons:
buttonClicked:
titleText:
destructiveText:
destructiveButtonClicked
cancelText:
cance:function
})
<body ng-controller="myCtrl">
<ion-header-bar>
<h1 class="title">header</h1>
</ion-header-bar>
<ion-content>
<p>Hello $ionicActionSheet</p>
<button class="button badge-calm" ng-click="show()">ShowActionSheet</button>
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl', ['$scope', '$ionicActionSheet',
function ($scope, $ionicActionSheet) {
$scope.show = function () {
$ionicActionSheet.show({
// 配置弹窗的内容
buttons: [
{text: '编辑'}, {text: '撤销'}
],
buttonClicked: function (index) {
console.log(index);
},
destructiveText: "删除",
destructiveButtonClicked: function () {
console.log('执行一些删除操作');
// 操作完成后关闭弹窗
return true;
},
titleText: "actionSheetTitle",
cancelText: '取消'
})
}
}]);
</script>
</body>
9、$ionicPopup 弹窗
alert/prompt/confirm
$ionicLoading
用一个覆盖层表示当前处于活动状态，来阻止用户的交互动作
$ionicLoading.show()/hide()
<body ng-controller="myCtrl">
<ion-header-bar>
<h1 class="title">header</h1>
<button class="button icon ion-refresh" ng-click="showLoading()">刷新</button>
</ion-header-bar>
<ion-content>
<button class="button button-positive" ng-click="showAlert()">弹窗 Alert</button>
<button class="button button-positive" ng-click="showConfirm()">弹窗 Confirm</button>
<button class="button button-positive" ng-click="showPrompt()">弹窗 Prompt</button>
</ion-content>
<ion-footer-bar>
<h1 class="title">footer</h1>
</ion-footer-bar>
<script src="js/ionic.bundle.min.js"></script>
<script>
angular
.module('myApp', ['ionic'])
.controller('myCtrl', ['$scope', '$timeout', '$ionicPopup', '$ionicLoading',
function ($scope, $timeout, $ionicPopup, $ionicLoading) {
// 显示一个加载中的窗口
$scope.showLoading = function () {
$ionicLoading.show({
template: '正在加载'
});
$timeout(function () {
$scope.hideLoading();
},2000);
};
// 隐藏一个加载中的窗口
$scope.hideLoading = function () {
$ionicLoading.hide()
}; // 显示一个警告框
$scope.showAlert = function () {
$ionicPopup.alert({
title: 'Donnot touch',
template: '食物有毒'
})
};
// 显示一个确认框
$scope.showConfirm = function () {
$ionicPopup.confirm({
title: '请确认',
template: '确定要这样操作吗？'
}).then(function (result) {
// 拿到confirm的结果
console.log(result);
})
};
// 显示一个确认输入框
$scope.showPrompt = function () {
$ionicPopup.prompt({
title: '标题',
template: '请输入金额'
}).then(function (result) {
console.log(result);
})
}
}])
</script>
</body>
Ionic中基于js的扩展(指令和服务)来实现各种效果的更多相关文章
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Breach - HTML5 时代，基于 JS 编写的浏览器
Breach 是一款属于 HTML5 时代的开源浏览器项目,,完全用 Javascript 编写的.免费.模块化.易于扩展.这个浏览器中的一切都是模块,Web 应用程序在其自己的进程运行.通过选择合适 ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- NET Core中基于Generic Host来实现后台任务
NET Core中基于Generic Host来实现后台任务 https://www.cnblogs.com/catcher1994/p/9961228.html 目录 前言 什么是Generic H ...
随机推荐
- Java接口 详解（一）
一.基本概念 接口(Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合.接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 如果一个类只由 ...
- 分享知识-快乐自己：全面解析 java注解实战指南
请你在看这篇文章时,不要感到枯燥,从头到尾一行行看,代码一行行读,你一定会有所收获的. 问: 为什么学习注解? 学习注解有什么好处? 学完能做什么? 答: 1):能够读懂别人的代码,特别是框架相关的代 ...
- VC++中list::list的使用方法总结
本文主题 这几天在做图像处理方面的研究,其中有一部分是关于图像分割方面的,图像目标在分割出来之后要做进一步的处理,因此有必要将目标图像的信息保存在一个变量里面,一开始想到的是数组,但是马上就发现使用数 ...
- Nginx中如何限制某个IP同一时间段的访问次数
如何设置能限制某个IP某一时间段的访问次数是一个让人头疼的问题,特别面对恶意的ddos攻击的时候.其中CC攻击(Challenge Collapsar)是DDOS(分布式拒绝服务)的一种,也是一种常见 ...
- unreal network
frame move buffer: save move position recive server sync:All moves earlier than the ClientAdjustPosi ...
- linux中python easy_install命令
centos 下安装 python easy_installcurl -O http://peak.telecommunity.com/dist/ez_setup.pypython ez_setup. ...
- java定时器，留着用
说明:该定时器作用是 设定定时器首次执行的时间firstTime和执行间隔period,如firstTime=2015-3-25 9:00:00,period=24小时,若程序启动时,已经超过firs ...
- mac内置的FTP工具
在 Mac OS X 系统下,有不少优秀的 FTP 工具,如 Cyberduck.Transmit,但是你是否知道除了这些第三方应用,系统已经为你准备好了一个内置的 FTP 工具?/ M: e0 J% ...
- .NETFramework：ConfigurationManager
ylbtech-.NETFramework:ConfigurationManager 1.程序集 System.Configuration, Version=4.0.0.0, Culture=neut ...
- kindeditor Springmvc 整和解决图片上传问题
1. 在编辑页面引入js <script type="text/javascript" charset="utf-8" src="${baseP ...