第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

1.将tab1.html的代码改为如下:

<ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
      <ion-slide ng-repeat="slide in slides">
        <div class="list has-header">
          <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
            <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
            <h3>{{item.title}}</h3>
            <p>{{item.description | substring:item.description}}</p>
          </a>
        </div>
        <ion-infinite-scroll ng-if="!hasmore" on-infinite="loadMore()" distance="1%">
        </ion-infinite-scroll>
      </ion-slide>
    </ion-slide-box>
</ion-content>

2.controller.js层Tab1Ctrl的实现

.controller('Tab1Ctrl', function ($scope, Tab1Service,  $ionicSlideBoxDelegate, $ionicTabsDelegate) {

    var page = 1,isLock=false;
    $scope.items = [];
    $scope.loadMore = function () {
        if(isLock)return;
        isLock=true;
        Tab1Service.getList(classify[0].url, page).success(function (response) {
            console.log(page)
            if (response.tngou.length == 0) {
                $scope.hasmore = true;
                return;
            }
            page++;
            $scope.items = $scope.items.concat(response.tngou);
        }).finally(function (error) {
            isLock = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.$broadcast('scroll.refreshComplete');
        });
    };
    $scope.doRefresh = function () {
        page = 1;
        $scope.items = [];
        $scope.loadMore();
    }
})

3.代码解释

上面菜单部分使用了Tab组建,中间的列表部分使用SlideBox,并不存在任何嵌套,只是在各自选择的时候做一些处理。

  • ion-refresher标签:下拉刷新的效果,下拉时触发doRefresh。
  • ion-infinite-scroll标签:上拉加载的效果 。
  • islock:锁,防止在网络慢的时候多次请求。
  • hasmore:在最后一页的时候禁止触发加载更多。

[ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll的更多相关文章

  1. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  2. [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  4. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  5. [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

  6. [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

  7. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  8. [ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

    第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...

  9. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

随机推荐

  1. json_encode charset

    json_encode  utf-8   mysql   charset  utf8

  2. Http Url Get请求方式需要对中文参数进行编码

    public static void main(String[] args) { try { String mytext = java.net.URLEncoder.encode("上海南站 ...

  3. [初级教程]用SecureCRT+Xming轻松远程实现Linux的X DISPLAY

    [初级教程]用SecureCRT+Xming轻松远程实现Linux的X DISPLAY 发布者:sqqdugdu 时间:10-06 阅读数:2117 测试环境:RHEL 6.1,SecureCRT 5 ...

  4. iOSpush过后返回多级界面

    有导航控制器push过后pop可以反回上一个界面,然而我们需要返回多级界面有下面两种方法 调用API - (NSArray *)popToViewController:(UIViewControlle ...

  5. 2014多校第一场 E 题 || HDU 4865 Peter's Hobby (DP)

    题目链接 题意 : 给你两个表格,第一个表格是三种天气下出现四种湿度的可能性.第二个表格是,昨天出现的三种天气下,今天出现三种天气的可能性.然后给你这几天的湿度,告诉你第一天出现三种天气的可能性,让你 ...

  6. POJ2402/UVA 12050 Palindrome Numbers 数学思维

    A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example,the ...

  7. VISO下载地址

    http://pan.baidu.com/share/home?uk=4011207371#category/type=0

  8. python unittest基本介绍

    python内部自带了一个单元测试的模块,pyUnit也就是我们说的:unittest 1.介绍下unittest的基本使用方法: 1)import unittest 2)定义一个继承自unittes ...

  9. C# winform post请求数据

    刚到公司混的时候,老板要求实现一个从C#的windows应用程序传参数到一个网页,然后这个网页不显示出来,但能把数据返回给应用程序的功能,问了好多人,找了好多资料,都搞不定,后来还是在老板的帮助下搞定 ...

  10. hibernate初次配置问题

    1.自动创建表结构 在hibernate.cfg.xml配置文件中修改 <property name="hibernate.hbm2ddl.auto">update&l ...