热搜：编程 Python Microsoft 编程语言 C++

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

发布时间：2023-04-18 20:51:31 来源：网络

.

风抚弄着庄稼，时而把它吹弯，时而把它扬起，仿佛大地在进行有节奏的呼吸，那一档档成熟的小麦也都有了生命，风从那边来，传来麦穗与麦穗间的细语。

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title>
  <link rel="stylesheet" rel="nofollow noopener noreferrer" href="../ionic/css/ionic.css" rel="external nofollow" >
  <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>

总结

以上所述是小编给大家介绍的使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

到此这篇关于使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码就介绍到这了。青春乃心境，而非年华；青春非现于桃面朱唇之艳，灵活矫健之躯，而现于志士之气，遐想之境，激情之盛。更多相关使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 选项卡 ionic