Ionic Pull для обновления (Refresher) внутри элемента

Можно ли реализовать вытягивание Ionic для обновления (он же "Refresher") внутри элемента, а не на всей странице?

Это было бы полезно при разработке приложения с небольшим прокручиваемым разделом на странице. При текущем поведении вытягивается вся страница, а не только прокручиваемый элемент.


ionic-framework angular ionic3 ionic-native ionic2
person Tyler    schedule 30.08.2017    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Вы можете сделать это с помощью ion-scroll. Пример кода, приведенный ниже:

<ion-content>
    <div class="row">
        <p class="col-sm-12">This text will display on top</p>
    </div>

    <div class="row"> 
        <div class="col-sm-6">
            <ion-scroll>
              <ion-refresher>
              </ion-refresher>
              <p class="col-sm-12">This text will be under ion-refresher pull refresh</p>
            </ion-scroll>
        </div>
        <div class="col-sm-6">
            <p class="col-sm-12">This text will display on center right</p>
        </div>    
    </div> 
    <div class="row">
        <p class="col-sm-12">This text will display on bottom</p>
    </div>
<ion-content>

Также, пожалуйста, проверьте изображение, только синяя часть контента будет под ионным обновлением. Другой раздел будет за пределами переподготовки.

введите описание изображения здесь

person I. Ahmed    schedule 09.01.2018
comment
ion-scroll не является известным элементом Ionic 4. Похоже, что ion-refresher работает только в пределах ion-content. Но наличие ионного содержимого внутри другого ионного содержимого, похоже, нарушает макет, в результате чего содержимое не отображается. - person Sem; 29.05.2019
comment
@Sem, вопрос помечен как ionic2 и ionic3, а не для ionic4. - person I. Ahmed; 30.05.2019
comment
Хорошо, но есть ли решение для Ionic 4?? Я не могу поверить, что мы еще не можем решить, какой элемент является родителем :| - person Jahrenski; 09.01.2020
comment
@Jahrenski, я не понимаю твоих требований. Пожалуйста, объясните понятнее. - person I. Ahmed; 10.01.2020
comment
@Я. Ахмед, если бы мы могли установить входное значение для ion-refresher Ionic 4 на пользовательский родительский элемент (например, div) вместо ion-content, все это было бы исправлено. - person Jahrenski; 13.01.2020

arrow_upward
6
arrow_downward

На самом деле вы можете сделать это, но это скорее обходной путь, чем действительно хорошее решение. Компоненты ion-refresher можно использовать только в ion-content.

Таким образом, вы можете разместить еще один ion-content на своей странице.

<ion-content padding>
    <div>
        <!-- Your other content -->
    </div>

    <!-- Additional ion-content -->
    <ion-content>
        <!-- Your inline ion-refresher -->
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>

Вам нужно поместить каждый ion-refresher в новый ion-content, потому что компонент ion-refresher будет помещен в конец контейнера scroll-content, созданного в ion-content.

Просто обратите внимание, что вы не сможете использовать полную страницу ion-refresher со страницей ввода ion-refresher, потому что обе будут выполнены, когда вы попытаетесь получить страницу ввода ion-refresher:

<ion-content padding>
    <ion-refresher></ion-refresher>

    <!-- Your other content -->

    <ion-content>
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>
person Stephan Strate    schedule 06.01.2018

arrow_upward
3
arrow_downward

Вы имеете в виду что-то вроде этого?

<div id='smaller-scrollable-section'>

    <ion-content>

        <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content></ion-refresher-content>
        </ion-refresher>

        <ion-list>
            <ion-item *ngFor="let item of collection">
            </ion-item>
        </ion-list>

        <ion-infinite-scroll (ionInfinite)="fetchMore($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>

    </ion-content>

</div>
person Cold Cerberus    schedule 06.09.2017

arrow_upward
3
arrow_downward

Пробовали ли вы использовать ion-scroll внутри ion-content в своем разделе и поместить внутрь обновление?

person Twen    schedule 03.09.2017
comment
проверьте решения выше, там используется это - person Twen; 16.01.2018