滚动时IScroll5和Jquery Mobile listview闪烁

时间:2015-01-06 17:06:11

标签: javascript android jquery css jquery-mobile

我一直在尝试将jquery mobile和iscroll5合并到我的项目中,我需要拉动刷新功能,像滚动一样流畅的脸书并在滚动端加载内容。我发现一个脚本在没有jquery mobile的情况下完美运行,但是当我使用jquery mobile并尝试滚动它时检测到我的滚动像悬停一样,当我的手指在屏幕上时它不是平滑滚动,并且当我释放它时开始再次光滑。

我最近几天读过这些文章的所有文章,我无法修复它。我使用的是文字http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html

Jquery Mobile版本是1.4.5。我在android设备上使用它为cordoba最新versin项目。

代码全部来自我提供的链接,唯一的变化是我已经包含了jquery mobile javascript,css和themes文件夹。

我已更改此代码

else if (refresh && next_page) {
                // Loading the next-page content and refreshing
                    $(function() {
                    inc += 10;
                    $.ajax({
                        dataType: "json",
                        url: "http://domain/json.php?l="+inc,  
                        type: "get",
                        success: function(data) {
                        console.log(data);
                            var temp    = '';
                            var i       = 0;
                            $.each(data, function(key, val) {
                                temp += '<li style="display:none" id="'+val.id+'"><a href="' + val.link + '" data-transition="slide" ><div class="imgLiquidFill imgLiquid" style="width:80px; height:60px;">' + val.slika + '</div><h2>' + val.naslov +'</h2><p><b>' + val.izvor + '</b>: ' + val.datum + '</p><p>' + val.tekst + '</p></a><div class="clear"></div></li>';

                                ++i;
                            });
                            $.mobile.loading( 'hide');
                            $('#wrapper > #scroller > ul').append(temp).listview('refresh');  
                            $(".imgLiquidFill").imgLiquid({fill:true}); 
                            $('li:hidden').show();              
                        }
                    }); 
                }); 

我正在更新滚动代码,但我的问题是我无法滚动

我认为最好是在滚动时锁定点击,因此如果开始滚动,我在屏幕上的初始点击不会被视为点击。

CSS

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        -ms-touch-action: none;
    }

    body,ul,li {
        padding: 0;
        margin: 0;
        border: 0;
    }

    body {
        font-size: 12px;
        font-family: ubuntu, helvetica, arial;
        overflow: hidden; /* this is important to prevent the whole page to bounce */
    }

    #wrapper {
        position: absolute;
        z-index: 100;
        top: 45px;
        bottom: 48px;
        left:9999px; /* Not a must - can be 0 - but it makes the appearance of the content a bit nicer */
        width: 100%;
        background: #ccc;
        overflow: hidden;
    }

    #scroller {
        position: absolute;
        z-index: 100;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }

    #scroller ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
        -webkit-transform: translate3d(0px, 0px, 0px);
    }

    #scroller li {
        padding: 0 10px;
        height: 80px;
        line-height: 80px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #fff;
        background-color: #fafafa;
        font-size: 14px;
    }

滚动条设置

myScroll = new IScroll('#wrapper', {
                probeType:1, 
                tap:true, 
                click:false, 
                preventDefaultException:{tagName:/.*/}, 
                mouseWheel:true, 
                scrollbars:true, 
                fadeScrollbars:true, 
                interactiveScrollbars:false, 
                keyBindings:false,
                deceleration:0.0002,
                startY:(parseInt(offset)*(-1))
            });

0 个答案:

没有答案