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被滚动。

离子窗格不滚动

1 个答案: