简体   繁体   中英

Hide navigation bar on scroll with animation Titanium

Some apps (facebook, 9gag) have this functionality. When the user scrolls up the navigation bar gradually hides itself to a point where vanishes. Then when the user scrolls down the navigationBar gradually shows itself (depending on the speed of the scroll).

We tried to implement this on Titanium by adjusting the height of the nav view on the scroll event, but it is lagged and very slow:

scrollView.addEventListener('touchstart',function(e){ 
        boolScroll=true;
});

scrollView.addEventListener('scroll',function(e){ 
    if(boolScroll){
        auxScroll=e.y;
        boolScroll=false;
    }
    var bh=bars.height;
    var sh=scrolls.height;

    if(auxScroll<e.y)//scrolling down
        if(bars.height>appHeight*0.08){
            bars.height=bh-appHeight*0.005; //rate for hiding
            if(scrolls.height<appHeight*0.7)
                scrolls.height=sh+appHeight*0.005;//same rate to increase the height of the scroll
        }

    if(auxScroll>e.y)//scrolling up
        if(bars.height<appHeight*0.08){
            bars.height=bh+appHeight*0.005; 
            if(scrolls.height>appHeight*0.7)
                scrolls.height=sh-appHeight*0.005;  
        }
});

We also tried doing it with translate animation on the view, but is still slow.

There is a solution for iOS on this question. Any help would be appreciated!

在此处输入图片说明

Don't know if you solved this problem but I did a trick that's working well for me ( at least for the navigation bar ) Here's the snippet :

self.addEventListener('scroll',function(e){
        if(e.contentOffset.y > 20) NavigationWindow.window.hideNavBar();
        if(e.contentOffset.y < 20) NavigationWindow.window.showNavBar();
    });

NavigationWindow is an instance of Ti.UI.iOS.createNavigationWindow, self can be a tableview,view,scrollview or a window ( in my example )

this is actually a really nice feature to have. Appcelerator just tackled it and should be available on release 6.0 according to this ticket: https://jira.appcelerator.org/browse/TIMOB-23684

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM