Titanium Appcelerator Mobile链接滚动视图保持顶部标签的位置没有滞后

时间:2012-01-25 10:11:35

标签: mobile scroll titanium scrollview appcelerator

我创建了这2个链接的滚动视图.. 我希望“timelineView”在滚动垂直时保持在最顶层,但它是滞后的,因为每次滚动事件触发时我都会设置顶部。 任何人都可以帮助我让它顺利吗?

注意:这有效,只是滞后..

注意2:水平滚动时,时间轴视图水平滚动,等于滚动视图“这是第x行”标签

亲切的问候,

Dirk(荷兰)

Titanium.UI.setBackgroundColor('#000');

//
// create base UI tab and root window
//
var win = Titanium.UI.createWindow({  
    title:'My fancy Schedule',
    backgroundColor: '#666',
    url: '/main_windows/scrollview.js',
    navBarHidden: true,
    width: 320,
    top: 0
});

var startHeight = 35;
var currentY = startHeight;
var areaLabelHeight = 20;
var timelineWidth = 1000;
var timelineHeight = 100;
var margin = 5;
var currentArea = 0;

var view = Ti.UI.createScrollView({
    width: win.width,
    contentWidth: win.width,
    height: win.height,
    left: 0,
    top: 0,
    zIndex: 7
});

var scrollView = Ti.UI.createScrollView({
    width: win.width, 
    contentWidth: timelineWidth,
    zIndex: 10,
    top: 0
});

var scrollView2 = Ti.UI.createScrollView({
    width: win.width, 
    height: win.height,
    contentWidth: timelineWidth,
    zIndex: 5,
    top: 0,
    backgroundColor: '#f00'
});

var timelineView = Ti.UI.createView({
    width: timelineWidth, 
    height: 20,
    left: 0,
    top: 0,
    zIndex: 30
});

var timeline = Ti.UI.createLabel({
    text: 'Timeline',
    width: timelineWidth, 
    height: 20,
    top: 0,
    left: 0,
    textAlign: 'left',
    color: '#fff',
    backgroundColor: '#000',
    font: {fontSize:10, fontWeight:'bold', zIndex: 31, textAlign: 'left'},
    zIndex: 31
});

timelineView.add(timeline);

for(i=0; i<10;i++) {
    currentArea = i+1;

    view.add(Ti.UI.createLabel({
        text: 'Area ' + currentArea.toString(),
        width: '100%', 
        height: areaLabelHeight,
        textAlign: 'left',
        zIndex: 20,
        top: currentY,
        left: 5,
        color: '#fff'
    }));

    currentY = currentY + areaLabelHeight + margin;

    scrollView.add(Ti.UI.createLabel({
        text: 'This is line ' + currentArea.toString(),
        width: timelineWidth, 
        height: timelineHeight,
        top: currentY,
        textAlign: 'left',
        backgroundColor: '#ccc'
    }));

    currentY = currentY + timelineHeight + margin;
}

view.setContentHeight(currentY);
scrollView.setHeight(currentY);
scrollView.add(timelineView);

view.add(scrollView);
win.add(view);


view.addEventListener('scroll', function(e){
    try{
        var bgPoint = view.convertPointToView(e, view);

        if(bgPoint.x == 0 && bgPoint.y > 0) {
            Ti.API.info("Background Point: " + bgPoint.x + "," + bgPoint.y)
            timelineView.setTop(bgPoint.y);
        }
    }
    catch(err) {
        Ti.API.error(err);
    }
});

win.open();

0 个答案:

没有答案