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 вызывается недостаточно много раз.

Как правильно реализовать эту задачу?
  • Вопрос задан
  • 24 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы