Question

在我找到一种让iScroll在动态上添加滚动容器和/或更改滚动容器内容长度的方法后，我遇到了其他功能的问题，例如

myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))

我没有使用固定ID工作，而是使用动态添加的类名，从<body onload="loaded()">开始，就像在oringinal样本中一样，

function loaded () {
    var myScroll;
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        myScroll = new IScroll('.iscroller'+index, { mouseWheel: true, click: true });
    })
}

到目前为止，滚动功能本身的工作正常。每个滚动容器，在html / php代码之前得到class="iscroller"，通过其索引获得另一个唯一的类名iscroller0 ...1 ...2，依此类推。

当内容被动态添加到容器中时，它仍然可以正常工作，之后调用<li>。滚动仍然按预期工作。但是当我想调用像

这样的函数时

loaded()

它仅适用于最后一个容器，对我来说似乎合乎逻辑。所以我尝试使用动态创建的对象而不是myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))，如下所示：

myScroll

在所有容器中像往常一样滚动仍然有效，但现在我希望能够调用

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        eval('var myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    })
,}

但是我收到了控制台错误myScroll2.scrollToElement(document.querySelector('.iscroller2 li:nth-child(10)'))。

我该怎么办？

Answer 1

最后我找到了解决方案。完整的解决方案就在这个片段中：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>iScroll test</title>
<script src="js/jquery-1-10-2.js.php"></script>

<script type="text/javascript" src="js/iscroll_5.js.php"></script>

<script type="text/javascript">

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        $(this).addClass('iscroller'+index);
        var ul = $(this).find('ul:eq(0)');
        for(var i=1; i < 10*(index+1); i++) ul.append('<li>Pretty Row '+i+'</li>');
    });
    iscroller_init ();
}

    function iscroller_init () {
        var iscroller = $('.iscroller');
        iscroller.each(function(index){
            eval('var myScroll'+index);
        });
        iscroller.each(function(index){
            eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
        });
    }

function click() {
    iscroller_init ();
    myScroll2.scrollToElement(document.querySelector('.iscroller2 li:last-child'), 1200, null, null, IScroll.utils.ease.elastic);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

    <link rel="stylesheet" media="all" href="css/iscroll_base.css" />
    <link rel="stylesheet" media="all" href="css/iscroller.css" />

</head>
<body onload="loaded()">
    <div class="module">
        <div id="header">iScroll</div>
        <div id="left" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>

        <div id="center" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>

        <div id="right" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div id="footer"><a href="javascript:click()">scrollToLast</a></div>

</body>
</html>

＆＃13;

滚动功能和myScroll2.scrollToElement(document.querySelector('.iscroller2 li:nth-child(10)'))的调用一样有效（是的，我在HTML中有3个容器，因此可以使用0,1和2的索引）。

但我不明白为什么以下作品......

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird definiert*/
        $(this).addClass('iscroller'+index);
        eval('var myScroll'+index);
    });
    iscroller.each(function(index){ /*var wird einmalig gefüllt*/
        eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

但这不是（滚动有效，但仍然是ReferenceError：未定义myScroll2）

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird definiert UND einmalig gefüllt*/
        eval('var myScroll'+index);
        eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

这不是

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird gleich definiert UND gefüllt*/
        eval('var myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

这对我来说仍然不合逻辑，所以也许有人可以发布另一个答案来解释发生了什么。

iScroll：动态滚动容器/添加内容/添加更多容器

1 个答案: