Titanium Scrollable视图不稳定,暂时停止一半

时间:2013-09-05 03:51:53

标签: titanium titanium-alloy

我一直在试图找出为什么我的应用程序中的可滚动视图非常不稳定,当我在页面之间切换时,它暂时停止了一半。每个页面的内容并不复杂,只有几个文本字段和图像。页数最多为8。 我使用的版本是;在iPhone4上的Titanium 3.1.2GA Alloy 1.2.1 iOS 6.1.3<<<重要的是 - 在iPhone5上看不到那种生涩感 请注意,我在去年11月开始这个项目,并在新版本发布时一直在升级我的环境。是否可以使用一些旧代码?我看到一个早期的1.0合金前错误提出了这个问题,它是否仍然存在于我的环境中? 我使用标准的两个标签Alloy模板创建了一个测试应用程序,并添加了下面的代码。对于第二个选项卡,我刚刚将选项卡1中使用的图像保存到磁盘。选项卡3没有任何图像,但仍然有点生涩。在我的应用程序中,我在每个页面上有更多的视图,它非常生涩。 如果有人有任何建议我会非常感激。如果有人请用iPhone4确认问题,这将是很好的,只是为了确保我的环境不是原因(我想我可以尝试卸载并重新安装,但我不知道如何正确卸载所有内容)。 干杯,拉尔斯

INDEX.XML

<Alloy>
    <TabGroup>
        <Tab title="Tab 1" icon="KS_nav_ui.png">
            <Window id="window1" title="Tab 1">
            </Window>
        </Tab>
        <Tab title="Tab 2" icon="KS_nav_views.png">
            <Window id="window2" title="Tab 2">
            </Window>
        </Tab>
        <Tab title="Tab 3" icon="KS_nav_ui.png">
            <Window id="window3" title="Tab 3">
            </Window>
        </Tab>
    </TabGroup>

Index.js

function createViews() {
    var v10 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#00FFFF");
    var v11 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FF00FF");
    var v12 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFF00");
    var v13 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
    var v14 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
    var v15 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");

    var v20 = createPage("images/Mona_Lisa.jpg", "#00FFFF");
    var v21 = createPage("images/Mona_Lisa.jpg", "#FF00FF");
    var v22 = createPage("images/Mona_Lisa.jpg", "#FFFF00");
    var v23 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
    var v24 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
    var v25 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");

    var v30 = createPage(null, "#229900");
    var v31 = createPage(null, "#333333");
    var v32 = createPage(null, "#009900");
    var v33 = createPage(null, "#FF77FF");
    var v34 = createPage(null, "#007744");
    var v35 = createPage(null, "#009988");
    var v36 = createPage(null, "#DDBB00");
    var v37 = createPage(null, "#CCCCCC");
    var v38 = createPage(null, "#99FFFF");

    var photosView1 = Ti.UI.createScrollableView({
        views:[
            v10,v11,v12,v13,v14,v15 // http images
        ],
        showPagingControl:true,
        cacheSize: 21
    });

    $.window1.add(photosView1);

    var photosView2 = Ti.UI.createScrollableView({
        views:[
            v20,v21,v22,v23,v24,v25 // file images
        ],
        showPagingControl:true,
        cacheSize: 21
    });
    $.window2.add(photosView2);

    var photosView3 = Ti.UI.createScrollableView({
        views:[
            v30,v31,v32,v33,v34,v35  // colored pages
        ],
        showPagingControl:true,
        cacheSize: 21
    });
    $.window3.add(photosView3);
}

function createPage(image, bkgColor) {
    var detailsView = Ti.UI.createView({
        width: Ti.UI.FILL,
        height: Ti.UI.FILL,
        top: 5,
        left: 5,
        right: 5,
        bottom: 100,
        backgroundColor: bkgColor
    });

    if (image) {
        var imageView = Ti.UI.createImageView({
            image:image
        });
        detailsView.add(imageView);
    }

    var labelView0 = Ti.UI.createLabel({
        text: "Label 0"
    });
    detailsView.add(labelView0);

    var pageView = Ti.UI.createView({
        width: Ti.UI.FILL,
        height: Ti.UI.FILL,
        backgroundColor: "#E4E8E8"  
    });
    pageView.add(detailsView);

    var labelContainer = Ti.UI.createView({
        height: 90,
        bottom: 5,
        left: 5,
        right: 5,
        backgroundColor: "#FFAAFF"
    });
    pageView.add(labelContainer);

    var labelView1 = Ti.UI.createLabel({
        bottom: 50,
        text: "Label 1"
    });
    labelContainer.add(labelView1);

    var labelView2 = Ti.UI.createLabel({
        bottom: 10,
        text: "Label 2"
    });
    labelContainer.add(labelView2);

    return pageView;
}

createViews();
$.index.open();

2013年9月6日......

基于评论,布局的模糊性可能导致我现在尝试使用具有绝对位置和大小的视图的生涩。我还使用了文件系统中具有与图像视图一样大小的图像。请参阅下面的代码。它更好但是仍然存在生涩状态,这意味着底层问题不能通过绝对位置和大小来解决。

function createPage(image, bkgColor) {
    var detailsView = Ti.UI.createView({
        width: 300,
        height: 300,
        top: 0,
        backgroundColor: bkgColor
    });

    if (image) {
        var imageView = Ti.UI.createImageView({
            width: 300,
            height: 300,
            image:image
        });
        detailsView.add(imageView);
    }
    else {
        var labelView0 = Ti.UI.createLabel({
            width: 300,
            height: 300,
            text: "No Image"
        });
        detailsView.add(labelView0);
    }

    var pageView = Ti.UI.createView({
        width: 300,
        height: 400,
        backgroundColor: "#E4E8E8"  
    });
    pageView.add(detailsView);

    var labelContainer = Ti.UI.createView({
        width: 300,
        height: 100,
        top: 300,
        backgroundColor: "#FFAAFF"
    });
    pageView.add(labelContainer);

    var labelView1 = Ti.UI.createLabel({
        width: 300,
        height: 20,
        top: 10,
        left: 10,
        text: "Label 1"
    });
    labelContainer.add(labelView1);

    var labelView2 = Ti.UI.createLabel({
        width: 300,
        height: 20,
        top: 40,
        left: 10,
        text: "Label 2"
    });
    labelContainer.add(labelView2);

    return pageView;
}

1 个答案:

答案 0 :(得分:1)

对我而言,它与scrollableView.cacheSize属性有关。尝试将其设置为视图数组的长度。