2015-11-26 3 views
1

Я использую разные шаблоны в Ionic для каждого представления. Я хочу, чтобы панель поиска оставалась в одном месте и позволяла прокручивать результаты, но в настоящее время просматривается весь вид. Мысли?Остановить прокрутку контента в Ionic

Запись альбома

<span class="item-note"> 
     Grammy 
    </span> 
    </button> 
    <div class="item item-input"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="text" placeholder="Search" ng-model="searchTerm"> 
    </div> 
</div> 
<ion-list> 
    <ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}"> 
    <h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2> 
    <p>{{psalm.metre}}</p> 
    <i class="icon ion-chevron-right icon-accessory"></i> 

    </ion-item> 
</ion-list> 

ответ

5

Вам нужно отключить прокрутку для родителей <ion-content> через scroll="false" и добавить <ion-scroll>.

Ваш <ion-list> будет обернута так:

<ion-scroll direction="y"> 
    <ion-list> 
     <ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}"> 
      <h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2> 
      <p>{{psalm.metre}}</p> 
      <i class="icon ion-chevron-right icon-accessory"></i> 
     </ion-item> 
    </ion-list> 
</ion-scroll> 

См ion-scroll и ion-content

1

ответ iWörk является правильным. Если вы не можете получить прокрутку, введите высоту в ионный свиток.

Сделайте следующие шаги.

  • Отключение свитка ионного содержания <ion-content scroll="false">
  • Добавить <ion-scroll direction="y" style="height: 500px"> к содержанию, что вам нужно иметь пролистывать

<ion-content scroll="false"> 
 
    <ion-scroll direction="y" style="height: 500px"> 
 
    <ion-list> 
 
     <ion-item ng-repeat="item in data.items"> 
 
     <!-- Content goes here--> 
 
     </ion-item> 
 
    </ion-list> 
 
    </ion-scroll> 
 
</ion-content>

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