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下拉刷 ...
随机推荐
- Java Math的 floor,round和ceil
floor 返回不大于的最大整数 round 则是4舍5入的计算,入的时候是到大于它的整数 round方法,它表示"四舍五入",算法为Math.floor(x+0.5),即将原来的 ...
- 浅谈C++中的友元关系
在封装中C++类数据成员大多情况是private属性:但是如果接口采用多参数实现肯定影响程序效率:然而这时候如果外界需要频繁访问这些私有成员,就不得不需要一个既安全又理想的"后门" ...
- Java相关错误
http://blog.csdn.net/pipisorry/article/details/51291063 使用hadoop jar ./Hw2Part1.jar /hw2/example-inp ...
- Java数据类型及类型转换
http://blog.csdn.net/pipisorry/article/details/51290064 java浮点数保留n位小数 import java.text.DecimalFormat ...
- Android中R文件的丢失问题以及aapt.exe停止工作如何解决
出现上面这个错误,说胆你的xml文件中出问题了..找了一下原因.如下.. R.java这个文件是会自动生成的.但是有时候你写错xml文件的时候,R.java是不会自动生成对应的值.这个时候我们会很习惯 ...
- JDBC编程学习笔记之数据库连接池的实现
在JDBC编程的时候,获取到一个数据库连接资源是很宝贵的,倘若数据库访问量超大,而数据库连接资源又没能得到及时的释放,就会导致系统的崩溃甚至宕机.造成的损失将会是巨大的.再看有了数据库连接池的JDBC ...
- iOS中 简单易懂的秒杀倒计时/倒计时
示例代码简单易懂: 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 #import <UIKit/UIKit.h> @interface ViewCon ...
- (八十一)利用系统自带App来实现导航
利用系统的地图App进行导航,只需要传入起点和终点.启动参数,调用MKMapItem的类方法openMapWithItems:launchOptions:来实现定位,调用此方法后会打开系统的地图App ...
- linux命令指usermod(管理用户以及权限的命令)
usermod命令:用来修改用户帐号的各项设定. 示例:usermod -a -G usergroupnewuser 或者usermod -aGusergroup newuser 语法:usermod ...
- HttpClient4登陆有验证码的网站
其实就这个问题,本来是很简单的,我自己花了近两个下午才搞定,现在记录一下.也希望能帮助后来的朋友. 先说httpclient 操蛋的httpclent! 为什么说操蛋呢,因为从httpclient ...