如何在温泉 ui 应用列表中显示滚动条

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 还没有滚动条元素（版本 1.3.1），但很有可能在不久的将来实现。

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

Answer 2

与 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 级别的滚动条，（我在考虑 lazy-repeat 控件的问题或外观和感觉上的跨平台差异）。换句话说：使用风险自负。

Answer 3

在最新版本的 onsen-ui 中，现在 <ons-scroller> 用于滚动目的，因此您可以将其添加到您的 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>

如何在温泉 ui 应用列表中显示滚动条

How to show scrollbars in onsen ui app list

javascript

css

angularjs

cordova

onsen-ui