ionic1 下拉刷新 上拉加载 功能
html页面如下
<ion-content>
<ion-refresher pulling-text="刷新" on-refresh="search()"></ion-refresher>
<!---首页内容-->
<div>
<ul>
<li ng-repeat="position in positions">内容</li>
</ul>
</div>
<!--首页内容结束-->
<ion-infinite-scroll ng-if="searchModel.offset<=(positions.count-10)" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
js如下
angular.module('app')
.controller('IndexCtrl', function($scope, positionService) {
$scope.searchModel = {
offset: 0
}
//下拉刷新
$scope.search = function(){
$scope.searchModel.offset = 0;
positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = response.data;
},function(error){
})
}
//上拉加载
$scope.loadMore = function(){
$scope.searchModel.offset += 10;
positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = $scope.positions.concat(response.data);
},function(error){
})
}
})
具体用法参考 http://www.ionic.wang/js_doc-index-id-25.html http://www.ionic.wang/js_doc-index-id-29.html
ionic1 下拉刷新 上拉加载 功能的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- ListView下拉刷新上拉加载更多实现
这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
- RecyclerView下拉刷新上拉加载(三)—对Adapter的封装
RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
随机推荐
- 【一天一道LeetCode】#223. Rectangle Area
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Find th ...
- Java基础--Java---IO流------GUI(布局)、Frame、事件监听机制、窗体事件、Action事件、鼠标事件、对话框Dialog、键盘事件、菜单
* 创建图形化界面 * 1.创建frame窗体 * 2.对窗体进行基本设置 * 比如大小.位置.布局 * 3.定义组件 * 4.将组件通过窗体的add方法添加到窗体 * 5.让窗体显 ...
- 【原创】Nginx+PHP-FPM优化技巧总结
php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能. 1.Unix域Socket通信 之前简单介绍过Unix Domain S ...
- Java之恋
初次见面那是一个河北的夏天风随沙散落天涯蝴蝶依旧恋着花回首走过的日子手指和键盘之间的梦想之光已恍如昨日 那年我还是一个刚踏进这个曾经只在地理课本上狂念南稻北麦,南油北花的土地那年你只是我必须要学的编程 ...
- UNIX网络编程——网络层:IP
一.IP数据报格式 IP数据报格式如下: 版本:IP协议版本号,长度为4位,IPv4此字段值为4,IPv6此字段值为6 首部长度:以32位的字为单位,该字段长度为4位,最小值为5,即不带任何选项的IP ...
- Cocos2D:塔防游戏制作之旅(十二)
以上代码块相当直观 - 但是它分解的有些细致了. 首先,敌人通过传递HelloWorldLayer对象的引用而初始化.在init方法里,少数重要的变量被设置: maxHP:定义敌人有多经打(Tough ...
- CUDA学习,使用shared memory实现Reverse Array
- java判断字符串是否回文
java判断字符串是否回文 /** * java判断字符串是否回文<br><br> * 基本思想是利用字符串首尾对应位置相比较 * * @author InJavaWeTrus ...
- byte和长度为8的boolean数组互相转换
由于byte是一个8位字节 所以可以用它来存放数组为8的boolean数组,这些在通信协议会经常用到.这里给出一个java代码对其互相转换的. package com.udpdemo.test2; i ...
- Dynamics CRM2011 隐藏sub-grid 新建项和添加现有项按钮
在CRM2011中ribbon区的自定义按钮可以通过工具例如RibbonEditor或者RibbonWorkbench进行配置包括action.display等等,但是系统级别的按钮是不能进行编辑的, ...