離子垂直滾動不能在選項卡式內容中工作

我已經爲內容設置了一系列帶有離子視圖的選項卡。內容在每個選項卡式路徑中都能正確顯示，但選項卡式內容不會垂直滾動，並且列表會從頁面中移出而無法訪問。標籤不應該滾動？文檔指出滾動應該默認打開離子內容。離子垂直滾動不能在選項卡式內容中工作

INDEX

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <!-- Application Styles --> 
    <link href="css/ionic.app.css" rel="stylesheet"> 

    <!-- Ionic Angular Scripts --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="lib/ionic/js/angular/angular-resource.js"></script> 

    <!-- Cordova Scripts --> 
    <script src="cordova.js"></script> 

    <!-- Application Scripts --> 
    <script src="js/app.js"></script> 
    <script src="js/app-configuration.js"></script> 
    <script src="js/app-interceptor.js"></script> 
    <script src="js/app-route.js"></script> 
    <script src="js/app-route-controller.js"></script> 
    <script src="js/app-resource.js"></script> 
    <script src="js/app-service.js"></script> 
</head> 
<body ng-app="eventApp"> 

<ion-nav-view></ion-nav-view> 

</body> 
</html>

儀表板視圖 - /儀表板

<ion-side-menus> 
    <ion-side-menu-content> 
     <ion-nav-bar class="bar-light"> 
      <ion-nav-back-button class="button-clear"> 
       <i class="ion-chevron-left"></i>&nbsp; Back 
      </ion-nav-back-button> 

      <ion-nav-buttons side="left"> 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
      </ion-nav-buttons> 

     </ion-nav-bar> 

     <ion-nav-view></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
     <ion-header-bar class="bar-light"></ion-header-bar> 

     <ion-content> 
      <ion-list class="list"> 
       <ion-item href="#" ui-sref="dashboard.index" class="item-icon-left" menu-close> 
        <i class="icon ion-map"></i>&nbsp; Map 
       </ion-item> 
       <ion-item href="#" ui-sref="dashboard.profile.index" class="item-icon-left" menu-close> 
        <i class="icon ion-android-person"></i>&nbsp; User Profile 
       </ion-item> 
       <ion-item href="#" ui-sref="dashboard.event.index" class="item-icon-left" menu-close> 
        <i class="icon ion-android-calendar"></i>&nbsp; Events 
       </ion-item> 
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
</ion-side-menus>

TABS內部景觀 - /儀表/事件/列表

<ion-view view-title="" id="pk-event" hide-back-button="true"> 
    <ion-tabs class="tabs-positive"> 

     <ion-tab title="Current" ui-sref="dashboard.event.index"> 
      <ion-nav-view name="current-tab"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Upcoming" ui-sref="dashboard.event.upcoming"> 
      <ion-nav-view name="upcoming-tab"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Past" ui-sref="dashboard.event.past"> 
      <ion-nav-view name="past-tab"></ion-nav-view> 
     </ion-tab> 

    </ion-tabs> 
</ion-view>

TAB子視圖 - /儀表/事件/目錄/目前

<ion-view title=""> 
    <ion-content> 
     <ion-list show-delete="showDelete" 
        show-reorder="showReorder" 
        can-swipe="canSwipe"> 

      <div class="item item-divider"> 
       Current Events 
      </div> 

      <div ng-repeat="event in events"> 

        <div>Date: {{event.dates[0] | date}}</div> 

        <br> 

        <h2>{{event.name}}</h2> 

        <p>Event Address: {{event.address}}</p> 

        <p>{{event.note}}</p> 

       </ion-item> 

      </div> 

     </ion-list> 
    </ion-content> 
</ion-view>

來源

2015-06-11 mtpultz

很肯定的父母應該在你的index.html文件，並應具有

<ion-nav-view> 
    </ion-nav-view> 
    <ion-tabs> 
    </ion-tabs>

然後你

<ion-view> 
<ion-content> 
</ion-content> 
<ion-view>

將填補離子導航視圖當你路線的狀態並且您的選項卡將保留在視圖下，而不會在視圖中的內容滾動時顯示。你也可以將你的標籤放在離子視圖內的離子內容中，但是如果你採用這種方法並且必須複製路由邏輯，你需要將它們放在每個狀態中。這裏是一個例子，我使用了一個離子視圖，它包含一個幻燈片框，其中一張幻燈片用標籤頁顯示離子內容。這裏是我擦掉的一個例子中的代碼。

HTML：

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Side Menus</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

    <ion-nav-view></ion-nav-view> 
    <ion-tabs class="tabs-positive tabs-icon-only"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
    <!-- Tab 1 content --> 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
    <!-- Tab 2 content --> 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
    <!-- Tab 3 content --> 
    </ion-tab> 

</ion-tabs> 

    <script id="templates/event-menu.html" type="text/ng-template"> 
     <ion-side-menus enable-menu-with-back-views="false"> 

     <ion-side-menu-content> 
      <ion-nav-bar class="bar-positive"> 
      <ion-nav-back-button> 
      </ion-nav-back-button> 

      <ion-nav-buttons side="left"> 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
       </button> 
      </ion-nav-buttons> 
      </ion-nav-bar> 

      <ion-nav-view name="menuContent"></ion-nav-view> 
     </ion-side-menu-content> 

     <ion-side-menu side="left"> 
      <ion-header-bar class="bar-assertive"> 
      <h1 class="title">Left Menu</h1> 
      </ion-header-bar> 
      <ion-content> 
      <ul class="list"> 
       <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links --> 
       <a href="#/event/check-in" class="item" menu-close>Check-in</a> 
       <a href="#/event/attendees" class="item" menu-close>Attendees</a> 
      </ul> 
      </ion-content> 
     </ion-side-menu> 

     </ion-side-menus> 
    </script> 

    <script id="templates/home.html" type="text/ng-template"> 
     <ion-view view-title="Welcome"> 
     <ion-content class="padding"> 
      <p>Swipe to the right to reveal the left menu.</p> 
      <p>(On desktop click and drag from left to right)</p> 
     </ion-content> 
     </ion-view> 
    </script> 

    <script id="templates/check-in.html" type="text/ng-template"> 
     <ion-view view-title="Event Check-in"> 
     <ion-content> 
      <form class="list" ng-show="showForm"> 
      <div class="item item-divider"> 
       Attendee Info 
      </div> 
      <label class="item item-input"> 
       <input type="text" placeholder="First Name" ng-model="attendee.firstname"> 
      </label> 
      <label class="item item-input"> 
       <input type="text" placeholder="Last Name" ng-model="attendee.lastname"> 
      </label> 
      <div class="item item-divider"> 
       Shirt Size 
      </div> 
      <ion-radio ng-repeat="shirtSize in shirtSizes" 
         ng-value="shirtSize.value" 
         ng-model="attendee.shirtSize"> 
       {{ shirtSize.text }} 
      </ion-radio> 
      <div class="item item-divider"> 
       Lunch 
      </div> 
      <ion-toggle ng-model="attendee.vegetarian"> 
       Vegetarian 
      </ion-toggle> 
      <div class="padding"> 
       <button class="button button-block" ng-click="submit()">Checkin</button> 
      </div> 
      </form> 

      <div ng-hide="showForm"> 
      <pre ng-bind="attendee | json"></pre> 
      <a href="#/event/attendees">View attendees</a> 
      </div> 
     </ion-content> 
     </ion-view> 
    </script> 

    <script id="templates/attendees.html" type="text/ng-template"> 
     <ion-view view-title="Event Attendees"> 
     <ion-content> 
      <div class="list"> 
      <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'" 
         ng-model="attendee.arrived" 
         ng-change="arrivedChange(attendee)"> 
       {{ attendee.firstname }} 
       {{ attendee.lastname }} 
      </ion-toggle> 
      <div class="item item-divider"> 
       Activity 
      </div> 
      <div class="item" ng-repeat="msg in activity"> 
       {{ msg }} 
      </div> 
      </div> 
     </ion-content> 
     </ion-view> 
    </script> 

    </body> 
</html>

JS：

angular.module('ionicApp', ['ionic']) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('eventmenu', { 
     url: "/event", 
     abstract: true, 
     templateUrl: "templates/event-menu.html" 
    }) 
    .state('eventmenu.home', { 
     url: "/home", 
     views: { 
     'menuContent' :{ 
      templateUrl: "templates/home.html" 
     } 
     } 
    }) 
    .state('eventmenu.checkin', { 
     url: "/check-in", 
     views: { 
     'menuContent' :{ 
      templateUrl: "templates/check-in.html", 
      controller: "CheckinCtrl" 
     } 
     } 
    }) 
    .state('eventmenu.attendees', { 
     url: "/attendees", 
     views: { 
     'menuContent' :{ 
      templateUrl: "templates/attendees.html", 
      controller: "AttendeesCtrl" 
     } 
     } 
    }) 

    $urlRouterProvider.otherwise("/event/home"); 
}) 

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { 
    $scope.attendees = [ 
    { firstname: 'Nicolas', lastname: 'Cage' }, 
    { firstname: 'Jean-Claude', lastname: 'Van Damme' }, 
    { firstname: 'Keanu', lastname: 'Reeves' }, 
    { firstname: 'Steven', lastname: 'Seagal' } 
    ]; 

    $scope.toggleLeft = function() { 
    $ionicSideMenuDelegate.toggleLeft(); 
    }; 
}) 

.controller('CheckinCtrl', function($scope) { 
    $scope.showForm = true; 

    $scope.shirtSizes = [ 
    { text: 'Large', value: 'L' }, 
    { text: 'Medium', value: 'M' }, 
    { text: 'Small', value: 'S' } 
    ]; 

    $scope.attendee = {}; 
    $scope.submit = function() { 
    if(!$scope.attendee.firstname) { 
     alert('Info required'); 
     return; 
    } 
    $scope.showForm = false; 
    $scope.attendees.push($scope.attendee); 
    }; 

}) 

.controller('AttendeesCtrl', function($scope) { 

    $scope.activity = []; 
    $scope.arrivedChange = function(attendee) { 
    var msg = attendee.firstname + ' ' + attendee.lastname; 
    msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); 
    msg += new Date().getMilliseconds(); 
    $scope.activity.push(msg); 
    if($scope.activity.length > 3) { 
     $scope.activity.splice(0, 1); 
    } 
    }; 

});

來源

2015-06-11 18:26:02

嗨我已更新我的代碼以顯示完整的模板/視圖層次結構。當我的觀點按照這種方式構建時，這仍然是你認爲的問題嗎？ – mtpultz

我可能是錯的，但我不認爲你想要他們自己的標籤，你需要把它們放在你想要的每個視圖的內容之外，或者把它們放在你的ion-nav-view之外（這樣它們顯示出來globaly）。從我所知道的情況來看，你一次不能有多個視圖填充ion-nav-view。所以要麼標籤需要在離子瀏覽視圖之外，或者需要存在於每個離子視圖中，但離子內容之外（因此滾動仍然有效） –

因此要麼離子NAV-視圖> 或 –

1.如果你仍然想使用離子含量，儘量增加高度

<ion-content height="500"> //it may be possible to use height="100%"

2。嘗試使用<ion-scroll direction="y"> instead of <ion-content>

TAB子視圖 - /儀表/事件/表/電流

<ion-view title=""> 
    <ion-scroll direction="y> <!-- use ion-scroll instead--> 
     <ion-list show-delete="showDelete" 
        show-reorder="showReorder" 
        can-swipe="canSwipe"> 
      <div class="item item-divider"> 
       Current Events 
      </div> 
      <div ng-repeat="event in events"> 
       <ion-item> 
        <div>Date: {{event.dates[0] | date}}</div> 
        <br> 
        <h2>{{event.name}}</h2> 
        <p>Event Address: {{event.address}}</p> 
        <p>{{event.note}}</p> 
       </ion-item> 
      </div> 
     </ion-list> 
    </ion-scroll> 
</ion-view>

來源

2015-06-12 05:31:41 vdj4y

我也有類似的問題。我只是這樣做：

<ion-content scroll="true">.....</ion-content>

和一切工作。希望能幫助到你。

來源

2015-08-21 09:06:42

離子垂直滾動不能在選項卡式內容中工作

回答

相關問題