Home >Web Front-end >JS Tutorial >Use ionic to implement address book interface switching example code

Use ionic to implement address book interface switching example code

小云云Original: 2018-01-04 13:29:171640browse

This article mainly introduces the example code of using ionic (tab bar) icon (icon) ionic pull-up menu (ActionSheet) to switch the address book interface. Friends who need it can refer to it. I hope it can help everyone.

Without further ado, I will post the code directly for you. The specific code is as follows:

<!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" rel="external nofollow" >
  <script src="../ionic/js/ionic.bundle.min.js"></script>
  <script type="text/javascript">
  angular.module(&#39;myApp&#39;, [&#39;ionic&#39;])
    .controller(&#39;RootCtrl&#39;, function($scope) {
      $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
        console.log(&#39;Controller changed&#39;, oldController, oldIndex, newController, newIndex);
        console.log(arguments);
      };
    })
    .controller(&#39;HomeCtrl&#39;, function($scope, $timeout, $ionicModal, $ionicActionSheet) {
      $scope.items = [];
      $ionicModal.fromTemplateUrl(&#39;newTask.html&#39;, function(modal) {
        $scope.settingsModal = modal;
      });
      //ionic 上拉菜单(ActionSheet)
      var removeItem = function(item, button) {
        $ionicActionSheet.show({
          buttons: [],
          destructiveText: &#39;Delete Task&#39;,
          cancelText: &#39;Cancel&#39;,
          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(&#39;ON REFRESH&#39;);
        $timeout(function() {
          $scope.$broadcast(&#39;scroll.refreshComplete&#39;);
        }, 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&#39;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>

Related recommendations:

Ionic's method of building sidebar carousel image loading animation

Use ionic to achieve infinite carousel and click jump

Introduction to ionic2 lazy loading configuration

The above is the detailed content of Use ionic to implement address book interface switching example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Problems encountered with the Replace() method in JSNext article：Problems encountered with the Replace() method in JS

See more

Use ionic to implement address book interface switching example code

Related articles