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 ...
随机推荐
- python做简易记事本
以下内容参考<辛星tkinter教程第二版>: from tkinter import * from tkinter.filedialog import * from tkinter.me ...
- Lua调用C,C++函数案例
该程序主要是C++与Lua之间的相互调用示例.执行内容:(1)新建一个lua_State(2)打开常用库,如io,os,table,string等(3)注册C函数(4)导入程序所在目录下所有*.lua ...
- 分享知识-快乐自己：spring_Boot 中文返回给浏览器乱码 解析成问号？？ fastJson jackJson
心路历程: 在Controller中return 对象的时候,对象中的属性值中文部分在浏览器中 显示为问号?? 然后结果是这样的:?? 尝试排查原因: 中文乱码常有以下三种: 1.request.re ...
- hdu 1042 N!（大数）
题意:求n!(0 ≤ N ≤ 10000) 思路:大数,用数组存储 1.首先要考虑数据N!的位数,因为最大是10000!,可以计算一下大概是5+9000*4+900*3+90*2+10*1=38865 ...
- Java常用类Date、Calendar、SimpleDateFormat详解
Date类 java.util 包提供了 Date 类来封装当前的日期和时间,Date 类提供两个构造函数来实例化 Date 对象 第一个构造函数使用当前日期和时间来初始化对象 Date( ) 第 ...
- javaScript的类型转换
1.javaScript会自动跟据期望将值进行转换,比如 2.下面表列出了一些javaScript的自动转换,其中粗体字表示了出乎意料的转换情况 3.显示的类型转换 尽管类型可以自动进行一些转换,但是 ...
- bzoj 4671 异或图 —— 容斥+斯特林反演+线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4671 首先,考虑容斥,就是设 \( t[i] \) 表示至少有 \( i \) 个连通块的方 ...
- 洛谷P3205合唱队——区间DP
题目:https://www.luogu.org/problemnew/show/P3205 枚举点,分类为上一个区间的左端点或右端点,满足条件便+=即可: 注意不要重复(当l=2时). 代码如下: ...
- Poj_1005_I Think I Need A HouseBoat
一.Description Fred Mapper is considering purchasing some land in Louisiana to build his house on. In ...
- [解决问题]SSH连不上Ubuntu虚拟机解决办法
1. 安装openssh-client Ubuntu默认缺省安装了openssh-client,apt-get安装即可 sudo apt-get install openssh-client 2. 安 ...