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

2019-11-19 15:07:23

字体：大中小

来源：转载

供稿：网友

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

<!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('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) 实现通讯录界面切换实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：使用JS中的Replace()方法遇到的问题小结

下一篇：2种简单的js倒计时方式