滚动时,webview内容在钛金属机器人中断/扭曲

时间:2014-09-11 10:49:01

标签: android html webview titanium

我在TITANIUM目前的项目中遇到了这个意想不到的问题。 我正在使用webview来显示本地html文件。它在iOS和某些Android设备中也很完美。但在大多数高清Android设备中,滚动时html页面或webview的内容中断。这是我的代码

var htmlTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras',     'learnMore.html');
    var cssTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras',    'learnMore.css');![enter image description here][1]
var html = htmlTemplate.read().text;
var css = cssTemplate.read().text;

html = html.replace("#css#", css);
//Animations Transformations
var small = Ti.UI.create2DMatrix({
    scale : 0.05
});
var big = Ti.UI.create2DMatrix({
    scale : 1.2
});
var normal = Ti.UI.create2DMatrix({
    scale : 1
});
//Animation Durations
var smallDuration = 350;
var bigDuration = 350;
var normalDuration = 250;
var win = Ti.UI.createWindow({
    backgroundColor : 'transparent',
    //navBarHidden : true,
});
var windowView = Ti.UI.createView({
    top : OS_IOS ? 20 : 1,
    right : 1,
    bottom : OS_IOS ? 10 : 1,
    left : 1,
    backgroundColor : '#fff',
    borderRadius : 7,
});
var closeImage = Ti.UI.createImageView({
    zIndex : 1,
    top : 5,
    right : 1,
    width : 35,
    height : 35,
    image : "/images/icons/black_cross_icon.png"
});
closeImage.addEventListener('click', closeWindow);

var webView = Ti.UI.createWebView({
    width : '100%',
    height : Ti.UI.SIZE,
    backgroundColor : "transparent",
    top : 0,
    html : html,
    //overScrollMode : Titanium.UI.Android.OVER_SCROLL_NEVER,

});
windowView.add(webView);
win.add(windowView);
win.add(closeImage);
function closeWindow() {
    if (OS_ANDROID) {
        win.close();
        return;
    }
    win.animate({
        duration : 300,
        transform : big
    }, function() {
        win.animate({
            duration : smallDuration,
            transform : small
        }, function() {
            win.close();
            webView = null;
        });
    });
}

(function() {
    win.open();
    if (OS_ANDROID) {
        return;
    }
    win.transform = small;
    win.animate({
        duration : bigDuration,
        transform : big
    }, function() {
        win.animate({
            duration : normalDuration,
            transform : normal
        });
    });
})();

win.addEventListener('open', function(e) {
    Ti.API.error('********************* Learnmore OPEN ***********************');
    if (OS_ANDROID) {
        win.activity.actionBar.hide();
    }
});

https://www.dropbox.com/s/ade8wssi5ima3gr/10671472_702509996463626_2272456868867723707_n.jpg?dl=0

1 个答案:

答案 0 :(得分:2)

好了,现在我知道这不是一个理想的解决方案,但如果你是钛开发人员,你必须每天处理这种情况,尤其是我们的敌人Android。 因此,在第一次加载webview之后,第二次重新加载webview的html,以解决我所做的事情。

var toggle = false;
webView.addEventListener('load', function(e) {
    if (toggle == false && OS_ANDROID) {
        this.html = html;
        toggle = true;
    }

});

这是我在我设置的html文件中的原因 < meta name =“viewport”content =“width = device-width,initial-scale = 0.9,user-scalable = no”/>

但遗憾的是它在某段时间内没有生效,因此在滚动时显示了一些有缺陷的UI。在解决它之后,似乎元标记有效。 希望它可以帮助一些人遇到这样的事情。