So zeigen Sie Bildlaufleisten in der On-App-Liste

Question

Ich benutze Onsen Ui, um eine hybride Phonegap App zu erstellen. Auf einigen Seiten gibt es Listen mit 100 Elementen. Die Bildlaufleisten werden jedoch nicht angezeigt. Gibt es trotzdem native Scrollbalken auf der Seite?

Hier ist der Code Ich verwende:

  <ons-row > 
       <ons-col align="center" > 
       <ons-list class="scrollme" ng-scrollbar is-bar-shown="true"> 
        <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);"> 
         <div class="hotel-item"> 
          <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage"> 
          <div class="gradient-overlay" style="text-align: center"> 
           <div class="details"> 
            <h4>{{hotel.name}}</h4> 
            <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}} 
           </div> 
          </div> 
         </div> 
        </ons-list-item> 
        <ons-button type="cta" should-spin="{{isFetching}}" 
         ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button> 
       </ons-list> 
       </ons-col> 
      </ons-row> 

aktualisieren

ich diese ng-scrollbar versucht, aber es funktioniert nicht. Scrollbar selbst scrollt nach oben, wenn ich die Liste scrolle.

Answer 1

Trotz nativer Apps hat Onsen UI noch kein Scrollbar-Element (Version 1.3.1), aber es gibt gute Chancen, dass es in naher Zukunft implementiert wird.

Quelle: Ich bin ein Mitglied Entwicklungsteam Onsen UI

Answer 2

Die onsenui.css Datei mit Onsen UI gebündelt wird, um die Scrollbar mit diesem Code versteckt:

::-webkit-scrollbar { 
    display: none; 
} 

die Bildlaufleisten zu aktivieren, müssen Sie nur un-tun dies, indem die Funktionalität überschreiben, beispielsweise durch diesen Code auf Ihre index.html hinzu:

<style> 
::-webkit-scrollbar { 
    display: block !important; 
    width: 5px; 
    height: 0px; 
} 

::-webkit-scrollbar-track { 
    background: rgba(0,0,0,0.1); 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 2px; 
    background: rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
} 
</style> 

WARNUNG

Während dieser Ansatz scheint in der besonderen Geschmack der App zu arbeiten, die ich zusammen (Android nur) zusammen. Die Tatsache, dass das Entwicklerteam die Bildlaufleiste verdeckt hat und sie nicht wieder auf den Bildschirm bringen kann (siehe andere Antwort von @Andy), lässt mich glauben, dass es einige unerwünschte Nebeneffekte geben könnte, um die Bildlaufleiste wieder zu aktivieren Scrollbar auf der CSS-Ebene, (Ich denke entlang der Linien der Probleme mit der lazy-repeat Kontrolle oder plattformübergreifenden Unterschiede in Aussehen und Haptik). Mit anderen Worten: Verwenden Sie auf eigene Gefahr.

Answer 3

In neuester Version von onsen-ui, wird nun <ons-scroller> zum Scrollen Zweck verwendet wird, so dass Sie es in Ihrem HMTL wie unten

<ons-scroller style="height: 200px; width: 100%"> 
<ons-row > 
    <ons-col align="center" > 
    <ons-list class="scrollme" ng-scrollbar is-bar-shown="true"> 
     <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);"> 
      <div class="hotel-item"> 
       <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage"> 
       <div class="gradient-overlay" style="text-align: center"> 
        <div class="details"> 
         <h4>{{hotel.name}}</h4> 
         <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}} 
        </div> 
       </div> 
      </div> 
     </ons-list-item> 
     <ons-button type="cta" should-spin="{{isFetching}}" 
      ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button> 
    </ons-list> 
    </ons-col> 
</ons-row> 
</ons-scroller>