Jak wyświetlać paski przewijania na liście aplikacji w usłudze onsen?

Question

Używam interfejsu użytkownika Onsen do zbudowania hybrydowej aplikacji Phonegap. Istnieją listy na niektórych stronach zawierających 100 elementów. Ale paski przewijania nie są wyświetlane. Czy jest tak, aby pokazać natywne paski przewijania na stronie?

Oto kod używam:

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

Aktualizacja

Próbowałem to ng-scrollbar, ale to nie działa. Sam pasek przewijania przewija się w górę po przewinięciu listy.

Answer 1

Pomimo aplikacji natywnych, interfejs użytkownika Onsen nie ma jeszcze elementu paska przewijania (wersja 1.3.1), ale istnieje duże prawdopodobieństwo, że zostanie on zaimplementowany w najbliższej przyszłości.

Źródło: Jestem członkiem Onsen UI Development Team

Answer 2

Plik onsenui.css pakiecie z Onsen UI jest ukrycie paska przewijania za pomocą tego kodu:

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

Aby włączyć paski przewijania, trzeba tylko to un-zrobić nadrzędnymi funkcjonalność, na przykład dodając ten kod do swojej 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> 

OSTRZEŻENIE:

Chociaż takie podejście wydaje się działać w szczególności w smaku aplikacji, którą zestawiłem (tylko system Android). Fakt, że zespół programistów ukrył pasek przewijania i nie ma sposobu, aby ponownie go umieścić na ekranie (patrz inna odpowiedź od @Andy), pozwala mi sądzić, że mogą wystąpić niepożądane efekty uboczne w celu ponownego włączenia paska przewijania. scrollbar na poziomie CSS, (myślę o problemach z kontrolą lub różnicami między platformami w wyglądzie i odczuciu). Innymi słowy: używaj na własne ryzyko.

Answer 3

W najnowszym wydaniu onsen-ui, teraz <ons-scroller> służy do przewijania cel, dzięki czemu można go dodać w swoim HMTL jak poniżej

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