zoukankan      html  css  js  c++  java
  • ionic 的下拉刷新 与 上拉加载

    <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();
    })
    

      此处的messages 是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!

    有不清楚的,可以提问!本人也是新手,大家一起共同学习进步!

  • 相关阅读:
    cf1100 F. Ivan and Burgers
    cf 1033 D. Divisors
    LeetCode 17. 电话号码的字母组合
    LeetCode 491. 递增的子序列
    LeetCode 459.重复的子字符串
    LeetCode 504. 七进制数
    LeetCode 3.无重复字符的最长子串
    LeetCode 16.06. 最小差
    LeetCode 77. 组合
    LeetCode 611. 有效三角形个数
  • 原文地址:https://www.cnblogs.com/ailen226/p/4626166.html
Copyright © 2011-2022 走看看