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下拉刷 ...
随机推荐
- Swift基础之Animation动画研究
最近研究了一下,Swift语言中关于Animation动画的实现学习,分两次进行相关内容的讲解 用表格列出各种动画情况 Demo首页显示展示了一种动画显示方式,代码如下: //绘画装饰 func ...
- [IDE工具配置]myeclipse 2014 专业版 安装 svn插件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38342411 本文作者:sushengmiyan 团队合作的项目肯定少不了版本控制,那 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- Android进阶(二十七)Android原生扰人烦的布局
Android原生扰人烦的布局 在开发Android应用时,UI布局是一件令人烦恼的事情.下面主要讲解一下Android中的界面布局. 一.线性布局(LinearLayout) 线性布局分为: (1) ...
- Spark-streaming 连接flume
1,程序为spark的example中的FlumeEventCount示例 object FlumeEventCount { def main(args: Array[String]) { Strea ...
- Libgdx 1.5.4发布,跨平台游戏开发框架
(原文链接:http://www.libgdx.cn/topic/70/libgdx-1-5-4%E5%8F%91%E5%B8%83) [1.5.4] 添加对Titled maps 的图像层的支持. ...
- RHEL6下获取安装包(RPM)而不安装的方法
RHEL6下获取安装包(RPM)而不安装的方法 有时候我们只能在某个机器上网获得RPM安装包,如何将RPM包在不能上网的内网机器安装,就需要能将安装包下载到本地而不安装,然后再把这些包复制到内网机器, ...
- PSAM 卡的应用 操作方法
PSAM 卡的应用 PSAM 功能 终端安全存储模块 PASM 常用于 脱机交易的 安全认证 脱机交易的流程 1.卡片对持卡人的认证(防止 ...
- U盘无法安装win10提示Your PC/Device needs to be repaired
前一阵子把笔记本自带的win8升级到8.1,又升级到win10. 差不多有一个月没有开机,前几天开机后进不了系统,出现如下图的提示.买电脑自带的win8是正版的,但升级到win10后就过期了,也真是坑 ...
- nodejs安装及故障解决
本文来自:http://hxl2009.blog.51cto.com/779549/1031320 给开发搞nodejs环境,遇到点问题记录下过程,备忘. wget http://nodejs.org ...