Ionic中基于js的扩展(指令和服务)来实现各种效果

1、ion-header-bar ion-footer-bar ion-content

　　　　align-title='left/ritght/center

<body>

<ion-header-bar align-title="left" class="bar-positive">

    <h1 class="title">header</h1>

</ion-header-bar>

<ion-content

        ng-controller="myCtrl"

        scroll="false"

>

    <!--

       * overflow-scroll:false   是否使用默认滚动条

       * scroll:true             是否允许滚动

    -->

    <ul class="list">

        <li class="item" ng-repeat="temp in list">

            {{temp}}

        </li>

    </ul>

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl', ['$scope', function ($scope) {

                $scope.list = [];

                for (var i = 0; i < 100; i++) {

                    $scope.list.push(i);

                }

            }])

</script>

2、ion-refresher 下拉刷新
ion-refresher作为ion-content的第一个元素

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

结束刷新动作：
$scope.$broadcast('scroll.refreshComplete');

<body>

<ion-header-bar>

    <h1 class="title">header</h1>

</ion-header-bar>

<!--下拉刷新组件-->

<ion-content ng-controller="myCtrl">

    <ion-refresher on-refresh="refresh()" pulling-text="下拉加载"></ion-refresher>

    <ul class="list">

        <li class="item" ng-repeat="temp in list">{{temp}}</li>

    </ul>

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl', ['$scope', function ($scope) {

                $scope.list = [4, 3, 2, 1, 0];

                $scope.refresh = function () {

                    $scope.list.unshift($scope.list.length);

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

                }

            }]);

</script>

3、ion-infinite-scroll 上拉加载更多
ion-infinite-scroll作为ion-content的最后一个元素

<ion-infinite-scroll on-infinite='loadMore()' immediate-check='false'>
</ion-infinite-scroll>

结束加载更多的动作
$scope.$broadcast('scroll.infiniteScrollComplete');

<body>

<ion-header-bar>

    <h1 class="title">header</h1>

</ion-header-bar>

<ion-content ng-controller="myCtrl">

    <p>Hello</p>

    <ul class="list list-inset">

        <li class="item" ng-repeat="tmp in list track by $index">{{tmp}}</li>

    </ul>

    <!--下拉加载更多-->

    <ion-infinite-scroll on-infinite="loadMore()" immediate-check="false"></ion-infinite-scroll>

    <!--

        immediate-check="false"

        禁止自动检查  默认为true 数据初始化会自动触发 loadMore

    -->

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl',['$scope','$timeout', function ($scope,$timeout) {

                $scope.list = [0,1,2,3,4];

                $scope.loadMore = function () {

                    $scope.list.push($scope.list.length);

                    $timeout(function(){

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

                    },1000)

                }

            }]);

</script>

</body>

4、$ionicScrollDelegate 处理和滚动的方法

方法：scrollTop\scrollBottom\scrollTo\getScrollPosition()

<body  ng-controller="myCtrl">

<ion-header-bar>

    <h1 class="title">header</h1>

</ion-header-bar>

<ion-content>

    <ul class="list">

        <li class="item" ng-repeat="i in list">{{i}}</li>

    </ul>

</ion-content>

<ion-footer-bar>

    <button class="button button-positive" ng-click="goTop()">goTop</button>

    <button class="button button-assertive" ng-click="goBottom()">goBottom</button>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl', ['$scope', '$ionicScrollDelegate',

                function ($scope, $ionicScrollDelegate) {

                    $scope.list = [];

                    for (var i = 0; i < 50; i++) {

                        $scope.list.push(i);

                    }

//                    滚动到顶部----》 params   true :开启动画

                    $scope.goTop = function () {

                        $ionicScrollDelegate.scrollTop(true);

                    };

//                    滚动到底部

                    $scope.goBottom = function () {

                        $ionicScrollDelegate.scrollBottom(true);

                    };

//                    获得当前滚动位置信息

//                    返回一个对象

//                            .top

//                            .left

                    $scope.getScrollPosition = function () {

                        var obj = $ionicScrollDelegate.getScrollPosition()

                        console.log(obj.top);

                    };

//                    滚动到指定位置

//                    scrollTo(left,top,是否开启动画)

                    $scope.set = function () {

                        $ionicScrollDelegate.scrollTo(0,540,true);

                    }

                }]);

</script>

</body>

5、ionTabs

<ion-tabs class='tabs-positive tabs-icon-left/right/only'></ion-tabs>

<ion-tab title='123' ng-click='func1()' icon-on/off=''>

<!--<ion-content>-->

    <!--

            * ion-tabs 不能放入 一个 ion-content 中

            * ion-tabs 选项卡区域默认在底部

     -->

<!--</ion-content>-->

<ion-tabs class="tabs-positive tabs-icon-left">

    <ion-tab title="音乐" icon="ion-headphone" ng-click="fun1()">

        <!--icon-in icon-off-->

        <ion-view>

            <ion-content class="energized-bg">

                <h1>这里是音乐的页面</h1>

            </ion-content>

        </ion-view>

    </ion-tab>

    <ion-tab title="游戏" icon="ion-ios-game-controller-b-outline">

        <ion-view>

            <ion-content class="positive-bg">

                <h1>这里是游戏的页面</h1>

            </ion-content>

        </ion-view>

    </ion-tab>

</ion-tabs>

6、侧边栏菜单(面板、抽屉)

<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side='left/right' width=''></ion-side-menu>
</ion-side-menus>

方式1：扩展属性
menu-toggle='left/right'
menu-close

方式2：js的方式
$ionicSideMenuDelegate:
toggleLeft(true/false)
toggleRight(true/false)
isOpenLeft/right()

<ion-side-menus>

    <ion-side-menu-content>

        <ion-header-bar>

            <button class="button badge-positive icon ion-navicon" menu-toggle="left"></button>

            <h1 class="title">header</h1>

            <button class="button button-assertive" ng-click="show(true)">打开右边菜单</button>

        </ion-header-bar>

        <ion-content>

            <h2>Hello sideMenu</h2>

        </ion-content>

    </ion-side-menu-content>

    <!--从左边打开的侧边栏菜单-->

    <ion-side-menu side="left">

        <button ng-click="show(false)" class="button icon ion-close"></button>

        <ul class="list">

            <li class="item">个人中心</li>

            <li class="item">关于</li>

            <li class="item">设置</li>

        </ul>

    </ion-side-menu>

    <!--从右边打开的侧边栏菜单-->

    <ion-side-menu side="right">

        <button class="button button-positive" menu-close="">点击关闭</button>

    </ion-side-menu>

</ion-side-menus>

<script src="js/ionic.bundle.min.js"></script>

<script>

    /*

    *   $ionicSideMenuDelegate

    *

    *   toggleLeft/Right

    *   isOpen/Left/Right

    *

    * */

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl',['$scope','$ionicSideMenuDelegate', function

                    ($scope,$ionicSideMenuDelegate) {

                $scope.show = function (arg) {

                    $ionicSideMenuDelegate.toggleRight(arg);

                }

            }])

</script>

7、$ionicModal 自定义弹窗

$ionicModal.fromTemplate/fromTemplateUrl('url',{scope:$scope}).then(function(modall){})

<body ng-controller="myCtrl">

<script id="myModal.html" type="text/ng-template">

    <ion-modal-view>

        <ion-header-bar>

            <h1>Header</h1>

        </ion-header-bar>

        <ion-content>

           <h3>Hello $iocnModal</h3>

        </ion-content>

    </ion-modal-view>

</script>

<ion-header-bar>

    <h1 class="title">header</h1>

</ion-header-bar>

<ion-content>

    <p>page</p>

    <button class="button button-positive" ng-click="openModal()">打开一个弹窗</button>

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

        .module('myApp', ['ionic'])

        .controller('myCtrl',['$scope','$ionicModal', function ($scope,$ionicModal) {

            $scope.openModal = function () {

                $ionicModal.fromTemplateUrl('myModal.html',{

                             scope:$scope

//                    指定数据作用域

                            })

                            .then(function (modal) {

//                                获得实例

                                $scope.modal = modal;

                                $scope.modal.show();

                            })

            }

        }]);

</script>

</body>

8、$ionicActionSheet 操作表

$ionicActionSheet.show({
　　buttons:
　　buttonClicked:
　　titleText:
　　destructiveText:
　　destructiveButtonClicked
　　cancelText:
　　cance:function
})

<body ng-controller="myCtrl">

<ion-header-bar>

    <h1 class="title">header</h1>

</ion-header-bar>

<ion-content>

    <p>Hello $ionicActionSheet</p>

    <button class="button badge-calm" ng-click="show()">ShowActionSheet</button>

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl', ['$scope', '$ionicActionSheet',

                function ($scope, $ionicActionSheet) {

                    $scope.show = function () {

                        $ionicActionSheet.show({

//                            配置弹窗的内容

                            buttons: [

                                {text: '编辑'}, {text: '撤销'}

                            ],

                            buttonClicked: function (index) {

                                console.log(index);

                            },

                            destructiveText: "删除",

                            destructiveButtonClicked: function () {

                                console.log('执行一些删除操作');

//                                操作完成后关闭弹窗

                                return true;

                            },

                            titleText: "actionSheetTitle",

                            cancelText: '取消'

                        })

                    }

                }]);

</script>

</body>

9、$ionicPopup 弹窗
　　alert/prompt/confirm

　　$ionicLoading
　　用一个覆盖层表示当前处于活动状态，来阻止用户的交互动作
　　$ionicLoading.show()/hide()

<body ng-controller="myCtrl">

<ion-header-bar>

    <h1 class="title">header</h1>

    <button class="button icon ion-refresh" ng-click="showLoading()">刷新</button>

</ion-header-bar>

<ion-content>

    <button class="button button-positive" ng-click="showAlert()">弹窗 Alert</button>

    <button class="button button-positive" ng-click="showConfirm()">弹窗 Confirm</button>

    <button class="button button-positive" ng-click="showPrompt()">弹窗 Prompt</button>

</ion-content>

<ion-footer-bar>

    <h1 class="title">footer</h1>

</ion-footer-bar>

<script src="js/ionic.bundle.min.js"></script>

<script>

    angular

            .module('myApp', ['ionic'])

            .controller('myCtrl', ['$scope', '$timeout', '$ionicPopup', '$ionicLoading',

                function ($scope, $timeout, $ionicPopup, $ionicLoading) {

//                显示一个加载中的窗口

                    $scope.showLoading = function () {

                        $ionicLoading.show({

                            template: '正在加载'

                        });

                        $timeout(function () {

                           $scope.hideLoading();

                        },2000);

                    };

//                    隐藏一个加载中的窗口

                    $scope.hideLoading = function () {

                        $ionicLoading.hide()

                    };

//                显示一个警告框

                    $scope.showAlert = function () {

                        $ionicPopup.alert({

                            title: 'Donnot touch',

                            template: '食物有毒'

                        })

                    };

//                显示一个确认框

                    $scope.showConfirm = function () {

                        $ionicPopup.confirm({

                            title: '请确认',

                            template: '确定要这样操作吗？'

                        }).then(function (result) {

//                        拿到confirm的结果

                            console.log(result);

                        })

                    };

//                显示一个确认输入框

                    $scope.showPrompt = function () {

                        $ionicPopup.prompt({

                            title: '标题',

                            template: '请输入金额'

                        }).then(function (result) {

                            console.log(result);

                        })

                    }

                }])

</script>

</body>

巴特西

Ionic中基于js的扩展(指令和服务)来实现各种效果

最新文章

热门文章