Ionic list, infinite scroll, tabs, header


#1

In index.html

<ion-nav-view animation="nav-title-slide-ios7"></ion-nav-view>

In menu

<ion-side-menu-content>

    <ion-nav-bar class="bar-royal">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-buttons side="left">
        <!--<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>-->
        <img src="images/logo.png" class="header-logo" alt="TB logo"/><span class="beta">beta</span>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <a ui-sref="main.status-new">
            <i class="icon ion-compose light"></i>
        </a>
    </ion-nav-buttons>

    <!-- HERE IS THE CONTENT INSERTED -->
    <ion-nav-view name="mainContent"></ion-nav-view>

</ion-side-menu-content>    

In some specific file

<ion-view title="Following">
             <div ng-show="checkUser.connection">
                  <ion-content ng-controller="homeStatusesCtrl"  ng-init="getHomeStatuses()" class="HOME has-tabs">
                     <ion-refresher pulling-text="Pull to refresh..." on-refresh="getHomeStatuses()"></ion-refresher>
    
                     <ion-list>
                    <ion-item ng-repeat="(key, status) in statuses | orderObjectBy:'time':true" class="item-thumbnail-left">
    
                        <img ng-src="{{ status.picture }}" alt="" />
                        <a ng-href="" class="username bold">{{ status.username }}</a>
                        <p ng-bind-html="status.status"></p>
                        
                    </ion-item>
                </ion-list>
    
                <ion-infinite-scroll ng-if="lastStatusId != 0" on-infinite="loadMoreStatuses()" distance="10%"></ion-infinite-scroll>
            </ion-content>
    
            <div class="tabs tabs-icon-top royal-bg">
                <a class="tab-item light">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a class="tab-item light">
                    <i class="icon ion-star"></i>
                    Unfollowing
                </a>
                <a class="tab-item light">
                    <i class="icon ion-star"></i>
                    Suggested
                </a>
                <a class="tab-item light">
                    <i class="icon ion-alert"></i>
                    Notifications
                </a>
            </div>
        </div>

Using together with ionic nav view, nav bar, and tabs.

When I load the page first time the infinite loader is fired BUT when i scroll down even when I have distance setted to 50% it’s just not working…

any idea what am I doing wrong? (testing in browser)


#2

Ah i forgot to broadcast after first load. [SOLVED] Now its working but someone could please check my ionic structure? Am I using the classes like has-tabs etc correctly?