ionic-----下拉三布局可点选

最新推荐文章于 2020-10-14 17:06:45 发布

Guiyide

最新推荐文章于 2020-10-14 17:06:45 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/Guiyide/article/details/79068454

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
       <link rel="stylesheet" href="css/ionic.css" />
       <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
       <script type="text/javascript">
           angular.module('ionicApp', ['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,$http) {
                   $scope.items = [];

                   $scope.bookss = ["C语言","B语言","D语言"];

                   $scope.refreshBooks = function(){
                       $http({
                           method:"get",
                           url:"books.json"
                       }).then(function success(response){
                           $scope.bookss = response.data;

                       },function error(response){

                       }).finally(function(){
                           $scope.$broadcast("scroll.refreshComplete");
                       });
                   }



                   $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
                       $scope.settingsModal = modal;
                   });

                   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
                   for(var i = 0; i < 25; i++) {
                       $scope.items.push({
                           title: 'Task ' + (i + 1),
                           buttons: [{
                               text: 'Done',
                               type: 'button-success',
                               onButtonClicked: completeItem,
                           }, {
                               text: 'Delete',
                               type: 'button-danger',
                               onButtonClicked: removeItem,
                           }]
                       });
                   }

               })

               .controller('TaskCtrl', function($scope) {
                   $scope.close = function() {
                       $scope.modal.hide();
                   }
               });
       </script>
   </head>

   <body ng-app="ionicApp" 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-positive">
                   <button class="button button-clear" ng-click="newTask()">New</button>
                   <h1 class="title">Tasks1</h1>
               </ion-header-bar>
               <ion-content >

                   <ion-refresher pulling-text="下拉刷新....." on-refresh="refreshBooks();"></ion-refresher>
                   <ion-list>
                       <ion-item ng-repeat="book in bookss track by $index">
                           {{book}}
                       </ion-item>
                   </ion-list>

                   
               </ion-content>
           </ion-tab>

           <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
               <ion-header-bar class="bar-positive">
                   <button class="button button-clear" ng-click="newTask()">New</button>
                   <h1 class="title">Tasks2</h1>
               </ion-header-bar>
               <ion-content has-tabs="true" on-refresh="onRefresh()">
                   这是第二个页面
               </ion-content>
           </ion-tab>

           <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
               <ion-header-bar class="bar-positive">
                   <button class="button button-clear" ng-click="newTask()">New</button>
                   <h1 class="title">Tasks3</h1>
               </ion-header-bar>
               <ion-content has-tabs="true" on-refresh="onRefresh()">
                   页面3
               </ion-content>
           </ion-tab>

       </ion-tabs>
   </body>

</html>

Guiyide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic-----下拉三布局可点选

angular.module('ionicApp', ['ionic']) .controller('RootCtrl', function($scope) { $scope.onControllerChanged = function(oldController, oldIndex, newController, new
复制链接

扫一扫