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 ...
随机推荐
- Linux中常用文件传输命令及使用方法
sftp sftp即Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中 ...
- 鸟哥的linux私房菜 - 第5/6/7/9章(在线求助 man page、Linux档案权限与目录配置、Linux档案与目录管理、压缩与打包)
第五章.在线求助 man page X window与文本模式的切换 Ctrl+Alt+F1~F6:文字接口登入tty1~tty6终端机: Ctrl+Alt+F7:图形接口桌面. 注销当前用户:exi ...
- 分享知识-快乐自己：SpringMvc后台Date对象数据 到 前台页面的显示转换
常常为日期格式的转换而烦恼吗?那么就试试看看楼主的方式吧!让你摆脱烦恼,从而快乐撸码. 如果你只用作于一个日期的显示采用方式如下: 导入:相应的类库 <%@ taglib uri="h ...
- 「SDOI 2009」Elaxia的路线
发现自己这几天智商完全不在线-- 这道题的数据十分的水,怎样都可以艹过去-- 开始想了一个完全错误的算法,枚举一对点,判断这一对点是否同时在两条最短路上,是就用两点之间的路径更新答案.显然这样是错的: ...
- 【Codeforces】Round #460 E - Congruence Equation 中国剩余定理+数论
题意 求满足$na^n\equiv b \pmod p$的$n$的个数 因为$n \mod p $循环节为$p$,$a^n\mod p$循环节为$p-1$,所以$na^n \mod p$循环 ...
- ef 多个模块，通过程序集映射entity，指定对应的repository
在Entity Framework repository下加两个方法: public virtual T GetByEntityName(object id, string EntityTypeNam ...
- VC Q&A （原创）
Q1:External Dependencies有什么作用? A1:(网友答复:)External Dependencies是说你没有把这个文件加入到这个工程中,但是需要这个文件的支持.当然有时是 ...
- html制作细线表格
关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing="1" bgcolor=&q ...
- 「LuoguP2365」 任务安排（dp
题目描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti. 在每批任务开 ...
- codevs 1576最长严格上升子序列
传送门 1576 最长严格上升子序列 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 给一个数组a1, a2 ... an ...