具有離子多視圖的垂直滾動條

我正在使用多個命名視圖來構建Ionic應用程序屏幕。具有離子多視圖的垂直滾動條

問題是，我有一個橫跨整個屏幕的垂直滾動條，即使沒有可滾動的內容。

滾動條覆蓋標題，內容和頁腳部分。內容部分包含一個列表，所以我想爲該部分提供一個滾動條，但前提是有足夠的內容需要它。

下面是代碼.....

的index.html

<!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> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 
    <!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js 
    will inject platform-specific code from the /merges folder --> 
    <script src="js/platformOverrides.js"></script> 
    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 
    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    </head> 
    <body ng-app="starter"> 
     <div ui-view="header"></div> 
     <div ui-view="content"></div> 
     <div ui-view="footer"></div> 
    </body> 
</html>

了header.html

<ion-content> 
    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Header</h1> 
    </ion-header-bar> 
    </ion-content>

content.html

<ion-content class="has-header has-footer"> 
    <ion-list> 
     <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}"> 
     {{playlist.title}} 
     </ion-item> 
    </ion-list> 
    </ion-content>

footer.html

<ion-content> 
     <ion-footer-bar align-title="left" class="bar-royal"> 
      <div class="buttons"> 
       <button class="button">Left Button</button> 
      </div> 
      <h1 class="title">Footer</h1> 
      <div class="buttons"> 
       <button class="button">Right Button</button> 
      </div> 
     </ion-footer-bar> 
    </ion-content>

app.js

angular.module('starter', ['ionic', 'starter.controllers']) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
     if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 
.config(function ($stateProvider, $urlRouterProvider) { 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('home', { 
     url: '/', 
     views: { 
      'header': { 
       templateUrl: '/templates/header.html' 
      }, 
      'content': { 
       templateUrl: '/templates/content.html', 
       controller: 'contentCtrl' 
      }, 
      'footer': { 
       templateUrl: '/templates/footer.html' 
      } 
     } 
    }); 
});

controllers.js

angular.module('starter.controllers', []) 
.controller('contentCtrl', function ($scope) { 
    $scope.playlists = [ 
     { title: 'Reggae', id: 1 }, 
     { title: 'Chill', id: 2 }, 
     { title: 'Dubstep', id: 3 }, 
     { title: 'Indie', id: 4 }, 
     { title: 'Rap', id: 5 }, 
     { title: 'Cowbell', id: 6 } 
    ]; 
});

你知道我怎麼可以刪除全屏幕的滾動條，但保持一個列表？

來源

2016-11-10 Damian

就像你看到的有內容的區域內滾動條。頁眉和頁腳是粘性的。你能提供一些截圖嗎？

來源

2016-11-10 12:04:11

我只在我看到滾動條的地方測試了紋波模擬器。我會看看我的Android設備 - 對不起，如果我浪費了你的時間！我回家後會更新。謝謝 – Damian

順便說一句，也嘗試將overflow-scroll =「true」放在content.html中 –

你是對的 - 它在設備上看起來很好。謝謝你的幫助！ – Damian

具有離子多視圖的垂直滾動條

回答

相關問題