Search code examples
javascriptiostitanium-mobiletitanium-alloy

Swipe gesture not swiping container off


I am trying to swipe a container and it's children elements off the screen. However when I run the following code, the child element I swipe goes off the screen as opposed to both elements.

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title : 'Tab 1',
    backgroundColor : '#fff'
});

var viewContainer = Titanium.UI.createImageView({
    backgroundColor : 'white',
    width : '100%',
    height : '100%',
    top : 0
});

var view = Titanium.UI.createImageView({
    backgroundColor : 'green',
    width : '100%',
    height : '100%',
    top : 0
});

var view1 = Titanium.UI.createView({
    backgroundColor : 'red',
    width : '100%',
    height : 100,
    bottom : 0
});


viewContainer.addEventListener('swipe', function(e) {

    if (e.direction == "right") {

        //TODO: add functionality here

    } else if (e.direction == "left") {

        var anim = Ti.UI.createAnimation({

            left : -300,
            duration : 200,
            curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
        });

        anim.addEventListener('start', function(_startanicallback) {

        });

        anim.addEventListener('complete', function(_anicallback) {

        });

        e.source.animate(anim);
    }

});

viewContainer.add(view);
viewContainer.add(view1);
win1.add(viewContainer);
win1.open();

I have a :

ViewContainer - where the event listener is attached too.

Inside that , view and view1 both child elements.

Not sure why this is happening.

Cheers.


Solution

  • The reason for only one of the elements being swiped is this line : e.source.animate(anim);

    If you will replace it with viewContainer.animate(anim); the swipe will work as you want.

    Hope it helps.