Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Swipe event not working in scrollable view

Here is a snippet - never entering swipe?!
Does anyone know why?

var scrollView = Titanium.UI.createScrollableView({
    showPagingControl:false,
    currentPage:1
});

win.add(scrollView);

scrollView.addEventListener('swipe', function(e)
{
  alert('dfs');
});
— asked July 6th 2010 by Marko Perutovic
  • scrollableview
  • swipe
0 Comments

3 Answers

  • I'm not sure the scrollable view fires that event, but you should be able to use the scroll event (adapted from the Kitchen Sink):

    scrollView.addEventListener('scroll', function(e) {
        activeView = e.view;
        i = e.currentPage;
        Titanium.API.info("current index " + i + ' active view ' + activeView);
    });
    
    — answered July 6th 2010 by Kevin Whinnery
    permalink
    1 Comment
    • According to documentation it fires swipe. Scroll event works but I need something before scroll (like swipe) to load the next view.

      — commented July 7th 2010 by Marko Perutovic
  • Cannot swipe on ScrollableView.

    Not possible on Titanium SDK 4.0 RC or below

    ####use ScrollView inside ScrollableView for ANDROID

    ####use view inside ScrollableView for IOS

    On ANDROID

    <ScrollView scrollType="horizontal" layout="horizontal" id="scrollView">
        <ScrollableView>
            <View></View>
            .
            .
            <View></View>
        </ScrollableView>
    </ScrollView>
    

    now listen to scrollView's swipe

    $.scrollView.addEventListener('swipe', function(e)
    {
        if(e.direction == "left" || e.direction == "right"){
            // triggers left right swipe
        }
    }
    

    On IOS

    <View id="view"  layout="vertical">
        <ScrollableView>
            <View></View>
            .
            .
            <View></View>
        </ScrollableView>
    </View>
    

    now listen to view's swipe

    $.view.addEventListener('swipe', function(e)
    {
        if(e.direction == "left" || e.direction == "right"){
            // triggers left right swipe
        }
    }
    

    ###Make sure you use scrollType and layout params as i have used for android & ios.

    And that's Jenga!

    — answered May 3rd 2015 by Omar Hassan
    permalink
    0 Comments
  • Prior to SDK 4?

        var scrollDirection = 0;
        var originalPage = scrollView.currentPage;
    
        scrollView.addEventListener('scroll', function (_e) {
            if (originalPage == null)
                originalPage = _e.currentPage;
            var delta = _e.currentPageAsFloat - originalPage;
            if ((Math.abs(delta) > Math.abs(scrollDirection)) || // Get the max point
                (delta * scrollDirection < 0)) // Or the direction changed
                    scrollDirection = delta;
        });
    
        scrollView.addEventListener('scrollend', function (_e) {
            var direction = null;
            if (_e.currentPage - originalPage < 0) direction = 'left';
            else if (_e.currentPage - originalPage > 0) direction = 'right';
            else { // User tried to swipe beyond boundaries but had to stay on the same page
                if (isAndroid && (scrollDirection == 0))
                    direction = (originalPage == 0) ? 'left' : 'right'; 
                if (isIos) {
                    if ((scrollDirection < -0.25) && (originalPage == 0)) direction = 'left';
                    else
                    if ((scrollDirection > 0.25) && (originalPage == scrollView.views.length - 1)) direction = 'right';
                }
            }
            var event = {source: _e.source, direction: direction, originalPage: originalPage};
            originalPage = _e.currentPage;
            scrollDirection = 0;
            if (direction)
                scrollView.fireEvent('swipe', event);
        });
    
    — answered May 18th 2015 by Yishai Brown
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.