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 ...
随机推荐
- SpringMVC拦截器的配置与使用详解
一.SpringMVC拦截器简介 Spring MVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.在springmvc中,定义拦截 ...
- listen 57
Secondhand Smoke Exposure Doubled Asthmatic Kids' Hospital Readmissions If your child has asthma哮喘, ...
- [算法]Trie树
我是好文章的搬运工,原文来自博客园,博主一线码农,选自”6天通吃树结构“系列,地址:http://www.cnblogs.com/huangxincheng/archive/2012/11/25/27 ...
- Codeforces 756C Nikita and stack
Codeforces 756C Nikita and stack 题目大意: 给定一个对栈进行操作的操作序列,初始时序列上没有任何操作,每一次将一个本来没有操作的位置变为某一操作(push(x),po ...
- bzoj 2159 Crash 的文明世界 & hdu 4625 JZPTREE —— 第二类斯特林数+树形DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2159 使用公式:\( n^{k} = \sum\limits_{i=0}^{k} S(k,i ...
- JMETER 定时器 之 常数吞吐量定时器
定时器: 默认情况下,Jmeter线程在发送请求之间没有间歇.建议为线程组添加某种定时器,以便设定请求之间应该隔多长时间.如果测试人员不设定这种延迟,Jmeter可能会在短时间内产生大量访问请求,导致 ...
- 用WINHEX合并两个或多个BIN文件
以前,我给W25Q16下载内容的时候,每次都要分别传输GBK字符.英文字符和图片BIN文件,每次都要传输好几次. 后来,我发现,用WINHEX软件可以把这些BIN文件都合并到一个文件,只需要传输一次就 ...
- Windows下搭建Subversion 服务器
一.准备工作 1.获取 Subversion 服务器程序 到官方网站(http://subversion.tigris.org/)下载最新的服务器安装程序.目前最新的是1.5版本,具体下载地址在:ht ...
- 《精通Spring4.X企业应用开发实战》读后感第二章
- day6 面向对象(2)
static关键字 1:如果没有static会怎样? 1:定义Person类 1:姓名.年龄.国籍,说话行为 2:多个构造,重载形式体现 2:中国人的国籍都是确定的 1:国籍可以进行显示初始化 cla ...