Ionic. Как правильно сделать выдвигать панель при скролле вверх и прятать при скролле вниз?

Например в плей маркете при скролле вниз прячется панель:
03uipYbr0dc.jpg
При скролле вверх она плавно выдвигается:
5RzTrmZPGE4.jpg

1. Как сделал я.
Использовал два события ionScrollStart и ionScroll
<ion-content class="contentupdate" (ionScrollStart)="list.scrollStart($event)" (ionScroll)="list.scrollHandler($event)">


typescript
scrollHandler(event){
        if(this.zone == null){
            alert('Подключите зону в конструкторе!');
            return;
        }
        let me=this;
        this.zone.run(()=>{
            me.scrolltoplast=event.scrollTop;
            
            if(event.directionY == 'down'){
                console.log('down');
                if(me.scrollAmount <= -25){
                    me.header.style.top = '2.5rem';
                }else{
                    me.scrollAmount--;
                }
            }
            else{
                console.log('up');
                if(me.scrollAmount >= 0){
                    me.header.style.top= '0rem';
                }else{
                    me.scrollAmount++;
                }
            }
            
            me.header.style.top= (me.scrollAmount/10) +'rem';
        });
    }


typescript
scrollStart(event){
        if(this.zone == null){
            alert('Подключите зону в конструкторе!');
            return;
        }
        let me=this;
        
        this.zone.run(()=>{
            if(me.header == null)
                me.header=<HTMLElement>document.getElementsByClassName('toolbar_mytasks')[0];
            
            console.log(me.header.style.top);
            me.scrollAmount = Number(me.header.style.top.split('rem')[0])*10;
            console.log(me.scrollAmount+'init');
        });
    }


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

Как правильно реализовать эту задачу?
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ответы на вопрос 1
AlexanderYudakov
@AlexanderYudakov
C#, 1С, Android, TypeScript
"Проблема в том что если быстро скролить, то блок выезжает совсем немного. То есть событие ionScroll вызывается недостаточно много раз."

А я даже не смотрю, насколько именно человек поскроллил. Есть скролл вниз - прячу панель, есть скролл вверх - возвращаю на место. С анимацией.

https://detaligaz63.ru/
Да простят меня админы...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 110 000 руб.
от 80 000 до 120 000 руб.
22 июля 2018, в 20:41
10000 руб./за проект
22 июля 2018, в 20:13
2000 руб./за проект