Heim > Artikel > Web-Frontend > Verwenden Sie ionic, um Beispielcode für die Adressbuchschnittstellenumschaltung zu implementieren

Verwenden Sie ionic, um Beispielcode für die Adressbuchschnittstellenumschaltung zu implementieren

小云云Original: 2018-01-04 13:29:171569Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung des ionischen Pullup-Menüs (Tab-Leiste) (ActionSheet) zum Wechseln der Adressbuchoberfläche vorgestellt. Ich hoffe, es kann helfen alle.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<!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>

Verwandte Empfehlungen:

Ionics Methode zum Erstellen einer Seitenleisten-Karussell-Ladeanimation

Verwendung von Ionic, um ein unendliches Karussell und einen Klicksprung zu erreichen

Einführung in die Lazy-Loading-Konfiguration von ionic2

Das obige ist der detaillierte Inhalt vonVerwenden Sie ionic, um Beispielcode für die Adressbuchschnittstellenumschaltung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Probleme mit der Methode „Replace()“ in JSNächster Artikel：Probleme mit der Methode „Replace()“ in JS

In Verbindung stehende Artikel

Mehr sehen