2015-04-28 3 views
1

У меня возникла небольшая проблема при упаковке ионного прокрутки в ионный список.Отключение вертикальной прокрутки на ионном прокрутке внутри ионного списка при прокручивании

Это мой код:

<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

Что я хочу, чтобы предотвратить прокрутку в то время как ударяя на ионном пункта, по умолчанию работает, но когда я попытался обернуть его, то не работает, можете ли вы мне помочь с какой-то альтернативой?

Дело в том, что я хочу сделать высоту ионным списка перебольшого с CSS, так что я с помощью ионной прокрутки внутри ионным списка

ответ

4

Я не понимаю, почему вы хотите, чтобы усложнить такую ​​простую вещь так много, удалите ионную прокрутку и придайте высоту содержанию ионов. Вы получите то, что вам нужно.

CodePen Here

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

спасибо, может быть, я должен врезаться головой в стену –

+1

Вы также можете отключить ионную свитку вместо удалить его, добавив 'scroll =" false "' в тег содержания ионов: ''. – SPottuit

2

Использование имеет дребезг = «ложный» в ионном содержании

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

если U имеет боковое меню или что-то есть-bouncing = "false" будет делать – iDeekshith

Смежные вопросы