Question

我在html表上使用无限滚动。这是我用来做无限滚动的代码

$('#divTable').bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            currentPageNo = currentPageNo + 1;
            myservice(id, pageSize, currentPageNo);


        }
    });

当页面加载时，它会用100条记录填充我的表格，因为我将pagesize作为100传递。当我向下滚动表格底部时，它会调用此代码myservice(id, pageSize, currentPageNo);两次。我不明白为什么它的两次打电话。

这是我的HTML

<div id="divTable" style="height: 535px;overflow-y: auto;overflow-x: hidden">
                    <table>
                        <tbody data-bind="foreach: myData">

                            <tr >

                                <td style="padding: 8px;width: 50px;" data-bind="text: Id "></td>

                            </tr>

                        </tbody>
                    </table>

                </div>

Answer 1

当我试图劫持滚动事件并使用它来允许我的用户一次推进一个页面时，我遇到了类似的问题。在履带板上你可以拥有我所说的＆＃34; intertial scrolling＆＃34;这将导致您的事件处理程序触发太多次。

如果滚动不是惯性滚动，则需要能够识别惯性滚动并仅运行事件处理程序。

以下是代码段：

var event = normalizeEvent(event);
  if(event.timeStamp - smartScroll.timeStamp < 50){

    smartScroll.inertia = true;
  }else{

    smartScroll.inertia = false;
  }

根据smartScroll.inertia的值，您将确定事件处理程序是否应该做出反应。

你可以在这里挑选完整的代码，虽然这里有很多与你的情况无关的代码： http://www.oliverpetkovski.com/javascript/main.js

Answer 2

这是使用我的＆＃34;智能滚动＆＃34;的完整答案。 code和jquery draggable允许你通过滚动条和mousewheeel调用记录。

https://github.com/maggiesavovska/knockoutEndlessScroll

注意：如果您仍然看到＆＃34; intertial scroll＆＃34;发生这种情况时，你必须调整第99行的if语句，增加实际事件时间戳与最后一个滚动事件的时间戳之间的阈值。这将指示滚动是真实的还是用户想要的还是惯性的。如果数字太高，当您尝试一个接一个地快速滚动时，您的用户将会卡住。如果它太低，那么无限卷轴会意外地前进。以下是我所指的代码：

if(event.timeStamp - smartScroll.timeStamp < 70)

您还必须确保在knockout中将数组设置为observable，并使用knockout定义的正确set方法在每个scroll事件上设置它的值。 http://knockoutjs.com/documentation/observables.html

要查看我正在谈论的内容，请参阅视图模型中的第15行和我的smartScroll.scrollEvent的第55行

对于数据，我在js文件中创建了一个数据对象，以后可以在集成服务后将其删除。要使用您的服务，请在代码中搜索评论＆＃39; //呼叫服务＆＃39;，这是您需要调用服务的地方，传入代码中已存在的pageNumber变量，页面大小，并返回数组。

您还需要知道包含数据的数组的全长。这将确定可拖动滚动元素的大小，如果您位于数据末尾，则可以将滚动元素定位在顶部或底部。在代码中的任何位置，它表示model1.newArray.length，您必须提供整个数据数组的长度。

搜索评论＆＃39; //稍后开始删除＆＃39;并从那里删除所有内容到＆＃39; //稍后删除＆＃39;一旦您整合了您的服务。

请记住，必须使用setter设置model1.curArray，而不是使用等号。这是目前的情况所以请确保不要改变它。这就是我的意思：正确（使用SETTER）：model1.curArray（model1.newArray [model1.pageNumber]）; 不正确（使用等号）：model1.curArray = model1.newArray [model1.pageNumber];

可以优化部分代码。如果我能够解决它，我会清理它，但它的工作原理。

wcf服务被调用两次

2 个答案: