Problem
The currentPage of a scrollable view does not always sync up with the visible dot. This happens because the dot is updated when the user scrolls over 50%, and the currentPage only updates when the underlying scroll view ends decelerating.
This is a problem because the app may act based on the currentPage of the scrollable view. So if the user swipes, and then hits a button that shows different content based on the currentPage, the wrong content can show up.
Reproduction
Drop the following in an app.js, and swipe right and left to the various pages of the scrollable view. Down at the bottom, I have placed a label that is updated with the currentPage.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var scroll = Ti.UI.createScrollableView({
bottom: 30,
views: [
Ti.UI.createView({ backgroundColor: 'cyan' }),
Ti.UI.createView({ backgroundColor: 'magenta' }),
Ti.UI.createView({ backgroundColor: 'yellow' })
],
pagingControlColor: '#000',
pagingControlHeight: 30
});
win.add(scroll);
var currentPageLabel = Ti.UI.createLabel({
text: 'Current Page: Loading...', textAlign: 'center',
bottom: 0, right: 0, left: 0,
height: 30,
color: '#fff', backgroundColor: '#000'
});
win.add(currentPageLabel);
setInterval(function() {
currentPageLabel.text = 'Current Page: ' + scroll.currentPage;
}, 50);
win.open();
The problem cannot reproduce with the release 3.0.2 and 3.1.0 see the screenshots
Closing ticket as the issue cannot be reproduced.