如何在onsen ui应用程序列表中显示滚动条

I'm using Onsen Ui to build a hybrid Phonegap app. There are lists on some pages with 100's of items. But, the scrollbars are not showing. Is there anyway to show native like scrollbars on the page?

我正在使用Onsen Ui来构建混合Phonegap应用程序。某些页面上有100个项目的列表。但是，滚动条没有显示。反正有没有在页面上显示本地滚动条？

Here is the code I'm using:

这是我正在使用的代码：

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

Update

更新

I have tried this ng-scrollbar , But it's not working. Scrollbar itself scrolls up when I scroll the list.

我试过这个ng-scrollbar，但它没有用。滚动列表时，滚动条本身会向上滚动。

3 个解决方案

#1

Despite native apps, Onsen UI doesn't have a scrollbar element yet (version 1.3.1), but there are good chances that it will be implemented in the near future.

尽管本机应用程序，Onsen UI还没有滚动条元素（版本1.3.1），但它很有可能在不久的将来实现。

Source: I'm an Onsen UI development team member

资料来源：我是Onsen UI开发团队成员

#2

The onsenui.css file bundled with Onsen UI is hiding the scrollbar using this code:

与Onsen UI捆绑在一起的onsenui.css文件使用以下代码隐藏滚动条：

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

To enable the scrollbars, you only need to un-do this by overriding the functionality, for example by adding this code to your index.html:

要启用滚动条，您只需通过覆盖功能取消此操作，例如将此代码添加到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>

WARNING

警告

While this approach seems to work in the particular flavour of app I put together (Android only). The fact the development team hid the scrollbar, and don't have a way to put it back on the screen yet (see other answer by @Andy), makes me think that there might be some unwanted side-effects to re-enabling the scrollbar at the CSS level, (Im thinking along the lines of problems with the lazy-repeat control or cross-platform differences in look and feel). In other words: use at your own risk.

虽然这种方法似乎适用于我放在一起的应用程序的特殊风格（仅限Android）。开发团队隐藏滚动条的事实，并没有办法将它放回到屏幕上（参见@Andy的其他答案），这让我觉得可能会有一些不必要的副作用重新启用CSS级别的滚动条（我正在考虑懒惰重复控制或外观和跨平台差异的问题）。换句话说：使用风险自负。

#3

In latest release of onsen-ui, now <ons-scroller> is used to scrolling purpose, so you can add it in your hmtl like bellow

在onsen-ui的最新版本中，现在用于滚动目的，因此您可以将其添加到hmtl中，如下所示

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

#1