PhoneGap中文网

 找回密码
 立即注册
查看: 28130|回复: 3
打印 上一主题 下一主题

inoic框架,上拉加载更多问题,很急?求解,谢谢了

[复制链接]

2

主题

2

帖子

18

积分

新手上路

Rank: 1

积分
18
跳转到指定楼层
楼主
发表于 2015-7-27 11:14:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
公司项目,每页显示5条数据,然后到最后一条数据上拉,加载更多数据。试了好多方法,但是都不行。现在公司项目比较急,大家有谁做过这样的吗?帮忙出出招,解决一下。小弟再次谢谢了。
回复

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
沙发
发表于 2015-7-27 21:46:36 | 只看该作者
ionic 基础教程看看      有上拉更新插件
回复 支持 反对

使用道具 举报

0

主题

1

帖子

8

积分

新手上路

Rank: 1

积分
8
板凳
发表于 2015-8-12 16:29:03 | 只看该作者
<ion-view view-title="消息通知">
  <ion-content class="padding">
 <!-- <ion-refresher> 下拉刷新指令  -->
  <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
    <div class="list card" ng-repeat="message in vm.messages" >
      <div class="item item-divider item-icon-right">{{message.title}}
        <i class="icon" ng-click="vm.show(message)" ng-class="message.static?‘ion-arrow-down-b‘:‘ion-arrow-right-b‘"></i></div>
      <div class="item item-body">
        <div>
          {{message.static?message.content:message.content.substr(0, 40)}}
        </div>
      </div>
    </div>
    <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时,就禁止执行on-infinite  -->
    <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
  </ion-content>
</ion-view>
 1. on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);

 2. on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);

js代码

angular.module(‘starter.controllers‘, [])
.controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) {
  var vm = $scope.vm = {
    moredata: false,
    messages: [],
    pagination: {
      perPage: 5,
      currentPage: 1
    },
    init: function () {
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = data;
      })
    },
    show: function (message) {
      if (message.static) {
        message.static = false;
      } else {
        message.static = true;
      }
    },
    doRefresh: function () {
      $timeout(function () {
        $scope.$broadcast(‘scroll.refreshComplete‘);
      }, 1000);
    },
    loadMore: function () {
      vm.pagination.currentPage += 1;
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = vm.messages.concat(data);
        if (data.length == 0) {
          vm.moredata = true;
        };
        $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
      })
    }
  }
  vm.init();
});
详细查看:http://www.bubuko.com/infodetail-955596.html
回复 支持 反对

使用道具 举报

0

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
地板
发表于 2017-1-6 23:13:43 | 只看该作者
楼主 我现在也遇到这个问题 能教教我吗
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-12-23 06:15 , Processed in 0.100539 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表