Vertikale Bildlaufleiste mit ionischen Mehrfachansichten

Ich verwende mehrere benannte Ansichten, um einen Bildschirm für ionische Anwendungen zu erstellen.Vertikale Bildlaufleiste mit ionischen Mehrfachansichten

Das Problem ist, ich habe eine vertikale Bildlaufleiste, die den gesamten Bildschirm erstreckt, obwohl es keinen scrollbaren Inhalt gibt.

Die Bildlaufleiste umfasst die Kopf-, Inhalts- und Fußzeilenabschnitte. Der Inhaltsbereich enthält eine Liste, daher möchte ich eine Bildlaufleiste für diesen Abschnitt, aber nur, wenn genügend Inhalt vorhanden ist, um einen zu benötigen. Hier

ist der Code .....

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 } 
    ]; 
});

Wissen Sie, wie ich die Vollbild-Bildlaufleiste entfernen kann, aber für die Liste einen halten?

Quelle

2016-11-10 Damian

Wie u eine Scrollbar innerhalb Inhaltsbereich sehen kann, gibt es. Kopf- und Fußzeile sind klebrig. Können Sie einige Screenshots bereitstellen?

Quelle

2016-11-10 12:04:11

Ich habe nur auf Ripple Emulator im Moment getestet, wo ich die Bildlaufleiste sah. Ich sehe mir mein Android-Gerät an - tut mir leid, wenn ich deine Zeit verschwendet habe! Ich werde aktualisieren, wenn ich nach Hause komme. Danke – Damian

btw auch versuchen, overflow-scroll = "true" in content.html setzen –

Sie haben Recht - es sieht gut aus auf dem Gerät. Danke für Ihre Hilfe! – Damian

Vertikale Bildlaufleiste mit ionischen Mehrfachansichten

Antwort

Verwandte Themen