javascript - iscorll插件上下滚动不了-Questions et réponses sur le réseau chinois PHP

Article Sujet apprentissage Télécharger Questions et réponses Dictionnaire de programmation Jeu mises à jour récentes

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - iscorll插件上下滚动不了

天蓬老师 2017-04-10 15:59:33

0

1

511

我这个用ajax加载数据他不能上下出现滚动条，手指拉不上去
要是用普通数据就能用，这是哪里出了问题

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
    </head>
    <!--<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js?v4"></script>\
    <style type="text/css">
        body,
        ul,
        li {
            padding: 0;
            margin: 0;
            border: 0;
        }
        body {
            font-size: 12px;
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: helvetica;
        }
        #scroller ul {
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }
        #ul1 li {
            list-style-type: none;
            width: 30%;
            float: left;
            overflow: hidden;
            margin: 1%;
        }
        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background-color: #d51875;
            padding: 0;
            color: #eee;
            font-size: 20px;
            text-align: center;
        }
        .footer {
            position: absolute;
            height: 40px;
            background: #777777;
            line-height: 40px;
            text-align: center;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 11px;
            color: #777;
            display: flex;
            display: -moz-box;
            display: -webkit-flex;
            border-top: 1px solid #ccc;
            color: #fff;
        }
        .footer nav {
            text-align: center;
            flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            cursor: pointer;
        }
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 40px;
            left: 0;
            width: 100%;
            background: #aaa;
            overflow: auto;
        }
        #scroller {
            position: relative;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            float: left;
            width: 100%;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            document.addEventListener('touchmove', function(e) {
                e.preventDefault();
            }, false);

            function getList() {
                $.ajax({
                    type: "get",
                    url: "https://api.douban.com/v2/book/search?q=javascript&alt=json&callback=fn1&start=1&count=20",
                    cache: false,
                    dataType: "jsonp",
                    jsonpCallback: "fn1",
                    success: function(data) {
                        var odata = data.books;
                        var ohtml = "";
                        for (var i = 0; i < odata.length; i++) {
                            ohtml += "<li><img src=" + odata[i]["images"]["small"] + "><p>" + odata[i]["title"] + "</p></li></ul>";
                        }
                        $("#scroller").html("<ul>"+ohtml+"</ul>");
                    },
                    error: function() {
                        alert("出错");
                    }
                });
            }
            getList();
            var myScroll = new iScroll('wrapper');
        });
    </script>

    <body>
        <header class="header">
        </header>
        <p id="wrapper">
            <p id="scroller">
            </p>
        </p>
        <footer class="footer">
            <nav>新闻</nav>
            <nav>文章</nav>
            <nav>科技</nav>
            <nav>女人</nav>
            <nav>男人</nav>
        </footer>
    </body>

</html>

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

répondre à tous(1)

伊谢尔伦2017-04-10 16:01:33 1 plancher

这类插件但凡动态改写了 DOM，都要手动去 re-render 一下插件，去看看它的 API 文档里有没有对应的方法吧。

顺便帮你查了一下，看这个例子：http://iscrolljs.com/#refresh

Comme +0

Ajouter une réponse

Sujets populaires

Plus>

Articles populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

À propos de nous Clause de non-responsabilité Sitemap: Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！