Come mostrare le barre di scorrimento nell'elenco delle app ui onsen

Question

Uso Onsen Ui per creare un'app ibrida di PhoneGap. Ci sono elenchi su alcune pagine con centinaia di elementi. Ma le barre di scorrimento non vengono visualizzate. Esiste comunque la possibilità di mostrare barre di scorrimento native come nella pagina?

Ecco il codice che sto utilizzando:

  <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> 

Aggiornamento

Ho provato questo ng-scrollbar, ma non funziona. Scrollbar stesso scorre verso l'alto quando faccio scorrere l'elenco.

Answer 1

Nonostante le app native, l'interfaccia utente di Onsen non ha ancora un elemento barra di scorrimento (versione 1.3.1), ma ci sono buone probabilità che sarà implementato nel prossimo futuro.

Fonte: Sono un membro del team di sviluppo Onsen UI

Answer 2

Il file onsenui.css bundle con Onsen UI si nasconde la barra di scorrimento utilizzando questo codice:

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

Per abilitare le barre di scorrimento, è sufficiente un-fare questo sovrascrivendo la funzionalità, ad esempio aggiungendo questo codice al tuo index.html:

<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> 

ATTENZIONE

Mentre questo approccio sembra funzionare nel particolare sapore dell'app che ho messo insieme (solo Android). Il fatto che il team di sviluppo abbia nascosto la barra di scorrimento e non abbia ancora modo di rimetterlo sullo schermo (vedi altra risposta di @Andy), mi fa pensare che potrebbero esserci alcuni effetti collaterali indesiderati per riabilitare il barra di scorrimento a livello CSS, (Sto pensando lungo le linee di problemi con il controllo lazy-repeat o differenze multipiattaforma nell'aspetto grafico). In altre parole: usare a proprio rischio.

Answer 3

In ultima release di onsen-ui, ora <ons-scroller> viene utilizzato per lo scorrimento scopo, in modo è possibile aggiungere nel tuo HTML come muggito

<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>