如何在onsen ui app列表中显示滚动条

Question

我正在使用Onsen Ui构建混合Phonegap应用程序。 某些页面上有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>

更新

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

Answer 1

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

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

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

警告

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

Answer 2

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

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

Answer 3

在onsen-ui的最新版本中，现在<ons-scroller>用于滚动目的，所以你可以像hlowl一样将它添加到下面

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