滑动时禁用离子列表内离子滚动的垂直滚动

Question

我在将 ion-scroll 包装到 ion-list 时遇到了一个小问题。

这是我的代码：

    <ion-content>

      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
 <ion-scroll style="height: 300px" >
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>
</ions-scroll>
      </ion-list>

    </ion-content>

http://codepen.io/anon/pen/yNyjGx

我想要的是防止在 ion-item 上滑动时滚动，默认情况下有效，但是当我尝试包装它时，它不起作用，你能帮我一些替代方案吗？

问题是我想用 css 调整 ion-list 的高度，所以我在 ion-list

中使用 ion scroll

Answer 1

这是该问题的简化解决方案。移除 ion-scroll 并赋予 ion-content 高度。

CodePen Here

<ion-content style='height : 300px'>

Answer 2

在 ion-content

中使用 has-bouncing="false"

   <ion-content has-bouncing="false">

  <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

  <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
      <ion-scroll style="height: 300px" >
    <ion-item ng-repeat="item in items" 
              item="item"
              href="#/item/{{item.id}}" class="item-remove-animate">
      Item {{ item.id }}
      <ion-delete-button class="ion-minus-circled" 
                         ng-click="onItemDelete(item)">
      </ion-delete-button>
      <ion-option-button class="button-assertive"
                         ng-click="edit(item)">
        Edit
      </ion-option-button>
      <ion-option-button class="button-calm"
                         ng-click="share(item)">
        Share
      </ion-option-button>
      <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>
   </ions-scroll>
  </ion-list>
 </ion-content>

滑动时禁用离子列表内离子滚动的垂直滚动

Disabling vertical scroll on ion-scroll inside ion-list when swiping

mobile

cordova

ionic-framework

ionic