用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作

最新推荐文章于 2023-11-02 17:26:52 发布

Dewey666

最新推荐文章于 2023-11-02 17:26:52 发布

阅读量1.1k

点赞数

分类专栏：效果初现文章标签： ion-tab icon ionicModal ionic上拉菜单ActionSheet ion-tabs

本文链接：https://blog.csdn.net/IT666DHW/article/details/78295469

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用ionic(选项卡栏tab)  icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title>
    <link rel="stylesheet" href="../ionic/css/ionic.css">
    <script src="../ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    angular.module('myApp', ['ionic'])

        .controller('RootCtrl', function($scope) {
            $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
                console.log('Controller changed', oldController, oldIndex, newController, newIndex);
                console.log(arguments);
            };
        })

        .controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
            $scope.items = [];

            $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
                $scope.settingsModal = modal;
            });
            //ionic 上拉菜单(ActionSheet)
            var removeItem = function(item, button) {
                $ionicActionSheet.show({
                    buttons: [],
                    destructiveText: 'Delete Task',
                    cancelText: 'Cancel',
                    cancel: function() {
                        return true;
                    },
                    destructiveButtonClicked: function() {
                        $scope.items.splice($scope.items.indexOf(item), 1);
                        return true;
                    }
                });
            };

            var completeItem = function(item, button) {
                item.isCompleted = true;
            };

            $scope.onReorder = function(el, start, end) {
                ionic.Utils.arrayMove($scope.items, start, end);
            };

            $scope.onRefresh = function() {
                console.log('ON REFRESH');

                $timeout(function() {
                    $scope.$broadcast('scroll.refreshComplete');
                }, 1000);
            }

            $scope.removeItem = function(item) {
                removeItem(item);
            };

            $scope.newTask = function() {
                $scope.settingsModal.show();
            };

            // Create the items
            $scope.user = [
                {
                    name:"Ben Sparrow",
                    words:"You on your way?"
                },
                {
                    name:"Max Lynx",
                    words:"Hey,it's me."
                },
                {
                    name:"Adam Bradleyson",
                    words:"I should buy a boat."
                },
                {
                    name:"Perry Governor",
                    words:"Look at my mukluks!"
                },
                {
                    name:"Mike Harrinqton",
                    words:"This is wicked good ice cream."
                },
            ];
        })
</script>
</head>

<body ng-app="myApp" ng-controller="RootCtrl">
<ion-tabs class="tabs-icon-only tabs-positive">

    <ion-tab title="Home"
             icon-on="ion-ios-filing"
             icon-off="ion-ios-filing-outline"
             ng-controller="HomeCtrl">

        <ion-header-bar class="bar-stable">
            <h1 class="title">Chats</h1>
        </ion-header-bar>

        <ion-content has-tabs="true" on-refresh="onRefresh()">

            <ion-refresher></ion-refresher>
            <ion-list scroll="false" on-refresh="onRefresh()"
                      s-editing="isEditingItems"
                      animation="fade-out"
                      delete-icon="icon ion-minus-circled">
                <ion-item ng-repeat="item in user"
                          item="item"
                          buttons="item.buttons"
                          can-delete="true"
                          can-swipe="true"
                          on-delete="deleteItem(item)"
                          ng-class="{completed: item.isCompleted}">

                    <span>
                        <img src="../img/y.jpg" height="56" width="56"/>
                        <p style="margin-left: 66px;margin-top: -50px"><b>{{item.name}}</b></p>
                        <p style="margin-left: 66px;">{{item.words}}</p>
                        <i class="ion-chevron-right" style="float: right;margin-top: -32px"></i>
                    </span>

                </ion-item>
            </ion-list>
        </ion-content>
    </ion-tab>

    <ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Deadlines</h1>
        </header>
        <ion-content has-header="true">
            <center>
                <img src="../img/q.jpg" height="462" width="427"/>
            </center>
        </ion-content>
    </ion-tab>

    <ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Settings</h1>
        </header>
        <ion-content has-header="true">
            <center>
                <img src="../img/y.jpg" height="462" width="427"/>
            </center>
        </ion-content>
    </ion-tab>

</ion-tabs>

</body>
</html>