源文地址:https://blog.csdn.net/kingcruel/article/details/67638880

再次感谢原作者

html

<ion-pane>
<ion-content>
<!--下拉刷新-->
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
<!--上拉加载更多-->
<ion-infinite-scroll ng-if="hasMore()" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-pane>

  

js:

appControllers.controller('RefreshCtrl', function ($scope, $timeout, $http) {
$scope.hasValue = true;
$scope.pageIndex = 1;
$scope.items = [
{ "id": 1, "name": "C#" },
{ "id": 2, "name": "C++" },
{ "id": 3, "name": ".Net" },
{ "id": 4, "name": "Android" },
{ "id": 5, "name": "Ios" },
{ "id": 6, "name": "HTML5" },
{ "id": 7, "name": "JavaScript" },
{ "id": 8, "name": "Css3" },
{ "id": 9, "name": "Ionic" },
{ "id": 10, "name": "AngularJS" },
{ "id": 11, "name": "Php" },
{ "id": 12, "name": "Java" },
{ "id": 13, "name": "C" },
{ "id": 14, "name": "SQL Server" },
{ "id": 15, "name": "Flash" },
{ "id": 16, "name": "MongoDB" }
]; $scope.doRefresh = function () {
console.log("ion-refresher");
/*
$http.get('http://www.shouce.ren/try/demo_source/item.json')//注意改为自己本站的地址,不然会有跨域问题
.success(function (newItems) {
$scope.items = newItems;
})
.finally(function () {
$scope.$broadcast('scroll.refreshComplete');
});
*/
$scope.items = [
{ "name": "菜鸟教程" },
{ "name": "www.runoob.com" }
];
$scope.$broadcast('scroll.refreshComplete');
}; $scope.hasMore = function () {
return $scope.hasValue;
} $scope.loadMore = function () {
console.log("ion-infinite-scroll");
var moreData = [
{ "id": 17, "name": "电子商务" + $scope.pageIndex },
{ "id": 18, "name": "互联网" + $scope.pageIndex },
{ "id": 19, "name": "交通" + $scope.pageIndex },
{ "id": 20, "name": "教育" + $scope.pageIndex }
];
$scope.items = $scope.items.concat(moreData);
if ($scope.pageIndex > 5) {
$scope.hasValue = false;
}
$scope.pageIndex++;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
})

  

ionic1.3.3 下拉刷新 上拉加载更多的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  10. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

随机推荐

  1. PID控制算法的c语言实现十二 模糊PID的参数整定

    这几天一直在考虑如何能够把这一节的内容说清楚,对于PID而言应用并没有多大难度,按照基本的算法设计思路和成熟的参数整定方法,就算是没有经过特殊训练和培训的人,也能够在较短的时间内容学会使用PID算法. ...

  2. Codeforces Round #358 (Div. 2) A B C 水 水 dfs序+dp

    A. Alyona and Numbers time limit per test 1 second memory limit per test 256 megabytes input standar ...

  3. Python之文件操作:os模块

    Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是linux 或者 unix 2.o ...

  4. centos中设置swap交换空间的大小设置和swappiness的比例设置

    首先使用free -m命令查看内存使用情况和swap的大小 关闭swap: 设置swap的大小: bs指的是Block Size,就是每一块的大小.这里的例子是1M,意思就是count的数字,是以1M ...

  5. gym100712 ACM Amman Collegiate Programming Contest

    非常水的手速赛,大部分题都是没有算法的.巨慢手速,老年思维.2个小时的时候看了下榜,和正常人差了3题(,最后还没写完跑去吃饭了.. A 水 Sort 比大小 /** @Date : 2017-09-0 ...

  6. Anniversary party(树形dp入门)

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. 百度搜索URL中的参数都是什么

    最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...

  8. 用django框架做自己的blog

    说明:我的系统环境是ubuntu 14.10版本的,整理这篇博客,主要是自己记性太不好了,老忘东西,教训一下自己.哈哈 参考文章 createing blog 1,part-1-creating-bl ...

  9. LintCode 373: Partition Array

    LintCode 373: Partition Array 题目描述 分割一个整数数组,使得奇数在前偶数在后. 样例 给定[1, 2, 3, 4],返回[1, 3, 2, 4]. Thu Feb 23 ...

  10. 探讨一个“无法创建JVM”的问题(已解决)

    ava版本:1.4 运行设置: -Xms1G -Xmx4G 报错: [ Incompatible initial and maximum heap sizes specified: ][ initia ...