zoukankan      html  css  js  c++  java
  • ionic 下拉刷新,上拉加载更多

    1)下拉刷新用的是 ion-refresher,使用示例如下:

    <ion-refresher
         pulling-text="Pull to refresh..."
         on-refresh="doRefresh()">
    </ion-refresher>

    详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionRefresher/

    刷新后需要收起 loading 动画

    $scope.$broadcast('scroll.refreshComplete');  

    2)上拉加载用的是 ion-infinite-scroll,使用示例如下:

    <ion-infinite-scroll
        on-infinite="loadMore()"
        distance="1%">
    </ion-infinite-scroll>

    详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

    加载完之后需要收起 loading 动画

    $scope.$broadcast('scroll.infiniteScrollComplete');

    PS:需要注意的是这两个功能标签都是需要写在 ion-content 标签里的,不然会出错

    来一个完整的demo:

    html部分

    <ion-view view-title="{{title}}" id="category">
      <ion-nav-buttons side="left" class="has-header">
        <button class="button button-icon icon ion-ios-arrow-back" ui-sref="page6"></button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right" class="has-header">
        <button class="button button-icon icon ion-android-home" ui-sref="page6"></button>
      </ion-nav-buttons>
      <ion-content padding="true" class="has-header">
        <ion-refresher
          pulling-text="Pull to refresh..."
          on-refresh="doRefresh()">
        </ion-refresher>
        <ion-list id="page5-list5">
          <ion-item ng-repeat="item in lists" class="item-grid-two" id="page5-list-item{{item.product_id}}">
              <div class="pic">
                <a href="/wap/product-{{item.product_id}}.html">
                  <img src="http://pics.imopark.com/{{item.default_image}}"></a><i></i>
              </div>
              <div class="product-info">
                <div class="p-price-bar">
                  <span class="fl p-price"> <em class="price">¥{{item.price}}</em>
                  </span>
                  <span class="fl p-discount"> <em class="">{{item.zk}}折</em>
                  </span>
                  <span class="fr p-sale-num">已售 {{item.codersum}}</span>
                </div>
                <h2 class="p-name">
                  <a href="/wap/product-{{item.product_id}}.html" class="split">{{item.name}}</a>
                </h2>
              </div>
          </ion-item>
        </ion-list>
        <ion-infinite-scroll
          ng-if="can_loadmore()"
          on-infinite="loadMore()"
          distance="1%">
        </ion-infinite-scroll>
      </ion-content>
    </ion-view>

    js部分

    angular.module('app.controllers', [])
       
    .controller('categoryCtrl', ['$scope', '$http', '$stateParams','$ionicLoading', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
    // You can include any angular dependencies as parameters for this function
    // TIP: Access Route Parameters for your page via $stateParams.parameterName
    function ($scope, $http, $stateParams, $ionicLoading) {
        var _arguments     = arguments;
        $scope.lists       = [];
        var page_no           = 1;
        var page_size    = 20;
        var page_total    = 0;
    
        $scope.can_loadmore = function(){
            return page_no<page_total;
        };
    
        $scope.$on('$ionicView.loaded', function(event, data) {
            page_no     = 1;
            get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(res){
                page_total = res.pager.total;
            });
        });
    
        $scope.doRefresh = function(){
            page_no     = 1;
            get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(){
                $scope.$broadcast('scroll.refreshComplete');
            });
        };
    
        $scope.loadMore = function(){
            page_no     += 1;
            get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(){
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
        };
    }])
     
  • 相关阅读:
    PointToPointNetDevice doesn't support TapBridgeHelper
    NS3系列—10———NS3 NodeContainer
    NS3系列—9———NS3 IP首部校验和
    NS3系列—8———NS3编译运行
    【习题 7-6 UVA
    【Good Bye 2017 C】 New Year and Curling
    【Good Bye 2017 B】 New Year and Buggy Bot
    【Good Bye 2017 A】New Year and Counting Cards
    【Educational Codeforces Round 35 D】Inversion Counting
    【Educational Codeforces Round 35 C】Two Cakes
  • 原文地址:https://www.cnblogs.com/tujia/p/6078394.html
Copyright © 2011-2022 走看看