ionic js

Posted 2020-10-31 她的睫毛

1.在tabs导航中，部分子页面隐藏底部选项卡

tabs添加：

<ion-tabs class="tabs-icon-top tabs-light " ng-class="{‘tabs-item-hide‘: $root.hideTabs}">

要隐藏选项卡的子页面：

<ion-nav-view hide-tabs="true" >
    <ion-header-bar  hide-tabs="true">

direction：

app.directive(‘hideTabs‘, function ($rootScope) {
    return {
        restrict: ‘A‘,
        link: function (scope, element, attributes) {
            scope.$on(‘$ionicView.beforeEnter‘, function () {
                scope.$watch(attributes.hideTabs, function (value) {
                    $rootScope.hideTabs = value;
                });
            });
            scope.$on(‘$ionicView.beforeLeave‘, function () {
                $rootScope.hideTabs = false;
            });
        }
    };
});

2.设置导航的过渡方向：

nav-direction="forward"  //back

JS中：注入

$ionicViewSwitcher

使用：

$ionicViewSwitcher.nextDirection("forward");

3.下拉刷新

 <ion-refresher pulling-text="下拉刷新" on-refresh="shuaxin()"></ion-refresher>

 $scope.shuaxin = function () {
        $scope.items = [//新items]
        $scope.$broadcast(‘scroll.refreshComplete‘);
    }

4.滚动条到底加载

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

$scope.loadMore = function () {
        $scope.items = [];
        $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
    };

  $scope.$on(‘stateChangeSuccess‘, function () {
          $scope.loadMore();
});