具有离子多视图的垂直滚动条

我正在使用多个命名视图来构建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中 –

具有离子多视图的垂直滚动条

回答

相关问题