离子窗格不滚动

Question

我对离子很陌生，但我总是遇到一些问题，我工作的时间越长。通常是很小的问题(幸运)，但它们足以使我止步不前。

无论如何，我有一个视图，有一些图像和水平滚动内容。但是如果我想在这个应用程序上垂直滚动，它就是不能工作。我试过添加

<ion-pane overflow-scroll="true">

但没有结果，我的问题仍然存在。有没有其他人有进一步的反馈，我应该寻找什么？

<ion-view  title="Home" hide-back-button="true">
  <ion-pane overflow-scroll="true">
  <div class="home-wrapper">

     <!--start featured banner-->
     <div ng-controller="testCtrl">
        <ion-slide-box delegate-handle="theSlider" show-pager="true" does-continue="true" auto-play="true">
          <ion-slide ng-repeat="feat in featured">
            <h2>{{feat.name}}</h2>
            <img ng-src="{{feat.heder_img}}" style="width:100%" />
          </ion-slide>
        </ion-slide-box>
      </div>
        <!--end featured banner-->

      <div ng-controller="barsCtrl">
        <h4>Top Rated Bars</h4>
        <hscroller>
        <a ng-repeat="bar in bars" href="#/venue/{{bar.id}}"><hcard index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard></a>
      </hscroller>
      </div>

      <div ng-controller="restCtrl">
        <h4>Top Rated Restaurants</h4>
        <hscroller>
        <a ng-repeat="restaurant in restaurants" href="#/venue/{{restaurant.id}}"><hcard index="{{$index}}" desc="{{restaurant.name}}" image="{{restaurant.profile_pic}}"></hcard></a>
      </hscroller>
      </div>

      <!-- upcoming 3 events -->
      <div ng-controller="test">
        <h4>Upcoming Events</h4>
        <div class="list">
          <div class="item item-divider">Today</div>
          <a class="item item-avatar" href="#">
            <img src="http://ionicframework.com/img/docs/slimer.jpg">
            <h2>Africa Oye</h2>
            <p>Come and join our festival</p>
          </a>
          <a class="item item-avatar" href="#">
            <img src="http://ionicframework.com/img/docs/slimer.jpg">
            <h2>Creamfields</h2>
            <p>Come and join our festival</p>
          </a>
        </div>
      </div>
      <!-- upcoming 3 events -->

  </div>

</ion-pane>
      <nav class="tabs tabs-icon-bottom tabs-positive">
              <a class="tab-item" ng-click="#">
                  Home<i class="icon ion-android-home"></i>
              </a>
              <!-- incluir link da categoria aqui, para ir a venue.html-->
              <a class="tab-item" ng-click="#" href="#/home">
                  Categories<i class="icon ion-ios-list"></i>
              </a>

              <a class="tab-item" href="#">
                  Events<i class="icon ion-calendar"></i>
              </a>
        </nav>
</ion-view>

Answer 1

只需用离子含量代替离子窗格.默认情况下，离子窗格不会滚动，因为

.pane{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

这肯定会防止你的div被滚动。