Ionic 常用组件解析

Ionic 常用组件解析

$ionicModal(弹出窗口)：

    //创建一个窗口
    //此处注意目录的起始位置为app
    $ionicModal.fromTemplateUrl('app/security/model/regist-model.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function(modal) {
        //缓存创建的窗口
        $scope.registModal = modal;
    });


    $scope.showRegist = function(){
        $scope.registModal.show();
    };

    $scope.hideDialog = function() {
        //隐藏
        $scope.registModal.hide();

        //移除
        //$scope.registModal.remove();
    };

$ionicLoading (loading ,可以作为信息提示)

                                            //是否不添加全屏遮罩效果     //自动消失时间
    $ionicLoading.show({template:'提示信息', noBackdrop: true, duration: 1500});

$ionicPopup (弹出一个小窗口 输入框，确认框，提示框)

    //1.创建一个自定义输入框
    $scope.showPopup = function() {
        $scope.data = {}
        var myPopup = $ionicPopup.show({
            template: '<input type="password" ng-model="data.wifi">',
            title: 'Enter Wi-Fi Password',
            subTitle: 'Please use normal things',
            scope: $scope,
            buttons: [{ 
                text: 'Cancel' 
            },
            {
                text: '<b>Save</b>',
                type: 'button-positive',
                onTap: function(e) {
                    if (!$scope.data.wifi) {
                        //don't allow the user to close unless he enters wifi password
                        e.preventDefault();
                    } else {
                        return $scope.data.wifi;
                    }
                }
            }]
        });

        //输入后的处理
        myPopup.then(function(res) {
            console.log('Tapped!', res);
        });

        //自动消失时间
        $timeout(function() {
            myPopup.close(); //close the popup after 3 seconds for some reason
        }, 3000);
    };

    //2.普通输入框
    $scope.showPopup = function() {
        $ionicPopup.prompt({
            title: 'Password Check',
            template: 'Enter your secret password',
            inputType: 'password',
            inputPlaceholder: 'Your password',
            okText:'OK'
        }).then(function(res) {
            console.log('Your password is', res);
        });
    }

    //3.确认框
    $scope.showConfirm = function() {
        var confirmPopup = $ionicPopup.confirm({
            title: 'Consume Ice Cream',
            template: 'Are you sure you want to eat this ice cream?'
        });
        confirmPopup.then(function(res) {
            //确认
            if(res) {
                console.log('You are sure');
            } else {//取消
                console.log('You are not sure');
            }
        });
    };


    //4.提示框
    $scope.showAlert = function() {
        var alertPopup = $ionicPopup.alert({
            title: 'Don\'t eat that!',
            template: 'It might taste good'
        });
        //确认后的操作
        alertPopup.then(function(res) {
            console.log('Thank you for not eating my delicious ice cream cone');
        });
    };

$ionicPopover (弹出一个带箭头的小对话框)

注意调用方法时不要漏掉 $event 参数

<p>
  <button ng-click="openPopover($event)">Open Popover</button>
</p>

    //方法一 直接自定义
    var template = '<ion-popover-view>' +
                        '<ion-header-bar>' +
                            '<h1 class="title">My Popover Title</h1>' +
                        '</ion-header-bar>'+
                        '<ion-content> Hello! </ion-content>'+
                    '</ion-popover-view>';

    $scope.popover = $ionicPopover.fromTemplate(template, {
        scope: $scope
    });

    //方法二 引用已存在的html
    $ionicPopover.fromTemplateUrl('my-popover.html', {
        scope: $scope
    }).then(function(popover) {
        $scope.popover = popover;
    });


    $scope.openPopover = function($event) {
        $scope.popover.show($event);
    };

    $scope.closePopover = function() {
        $scope.popover.hide();
    };


    //拥有的相关事件
    //Cleanup the popover when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.popover.remove();
    });

    // Execute action on hidden popover
    $scope.$on('popover.hidden', function() {
        // Execute action
    });

    // Execute action on remove popover
    $scope.$on('popover.removed', function() {
        // Execute action
    });

ionc-list (列表的使用,包括添加按钮，删除等)

ionc-list(基本列表创建)

    <ion-list>
      <ion-item ng-repeat="item in items">
        Hello, {{item}}!
      </ion-item>
    </ion-list>

ion-delete-button,ion-reorder-button (delete按钮显示在左方,reorder按钮显示在右方)

    <!--
        show-delete :控制是否显示删除按钮
        show-reorder:控制是否显示reorder按钮
    -->
    <ion-list show-delete="isShowDelete"  show-reorder="isShowEdit" class="my-divider-list">
        <ion-item ng-repeat="studyItem in data.studyData">

        <div class="item item-divider">
            <span class="expect-label">学习内容:</span> <span class="expect-desc">{{studyItem.title}}</span>
        </div>
        
        <a class="item" >
            <span class="expect-label">日期:</span> <span class="expect-desc">{{studyItem.date|date:'yyyy-M-dd'}}</span>
        </a>

        <a class="item" >
            <span class="expect-label">学习明细:</span> <span class="expect-desc">{{studyItem.desc}}</span>
        </a>

        <!--
            添加删除按钮
        -->
        <ion-delete-button class="ion-minus-circled" ng-click="deleteStudy(studyItem)">
        </ion-delete-button>
        <!--
            添加reorder 按钮
        -->
        <ion-reorder-button class="ion-edit" ng-click="showEditStudyDialog(studyItem, $fromIndex, $toIndex)">
        </ion-reorder-button>

      </ion-item>
    </ion-list>

ion-option-button

    <!-- can-swipe="true"  添加该属性才能开启滑动附加按钮-->
    <ion-list can-swipe="true">
        <ion-item ng-repeat="costItem in data.costData">

        <div><span class="expect-label">支出金额:</span> <span class="expect-desc">{{costItem.money}}</span></div>
        <div><span class="expect-label">支出日期:</span> <span class="expect-desc">{{costItem.date|date:'yyyy-M-dd'}}</span></div>
        <div><span class="expect-label">支出明细:</span> <span class="expect-desc">{{costItem.desc}}</span></div>
        
        <!--添加滑动按钮-->
        <ion-option-button class="button-info"
                           ng-click="showEditCost(costItem)">
          修改
        </ion-option-button>
        
        <ion-option-button class="button-assertive"
                           ng-click="deleteCost(costItem)">
          删除
        </ion-option-button>

      </ion-item>
    </ion-list>

    //该方法可以关闭已经显示的按钮
    $ionicListDelegate.closeOptionButtons()

ion-slide-box (滑动卡组件)

    <!--
        active-slide:初始index
        show-pager:是否显示下方滑动按钮
        on-slide-changed：滑动事件

        <ion-slide>滑动的内容
    -->
    <ion-slide-box  active-slide="activeSlideIndex" show-pager="true" on-slide-changed = "productSlideChanged($index)">
      <ion-slide  ng-repeat="item in data.picTPLdata" >
        <div class="list card">
            <div class="item">
                <h2>{{item.desc1}} <span style ="color: gray;">{{item.desc0}}</span></h2>
            </div>
            <div class="item item-image">
                <img src="{{item.url}}">
            </div>
        </div>
      </ion-slide>
    </ion-slide-box>

ion-refresher (下拉刷新数据)

    <ion-refresher pulling-text="刷新数据中.." on-refresh="doRefresh()">
    </ion-refresher>

    $scope.doRefresh = function() {
        FGOService.getNoteData()
        .then(function(result){
            $scope.data.noteData  = result;
            //关闭刷新提示
            $scope.$broadcast('scroll.refreshComplete'); 
        })
    };

转载于:https://www.cnblogs.com/final-elysion/p/6078543.html