Question

我知道listview的网络版没有开箱即用的无限滚动功能，就像手机一样。我仍然需要在我的解决方案中实现这一点，我不确定从哪里开始。我拥有的所有想法都需要我再次实现所有数据。所以假设我有25行加载。你到达滚动点并且它加载了25个，我实现它的方式它会重新加载前25个并再加25个。这当然会越慢，你走的越多，所以这不是一个选择哈哈有没有成功做过这样的事情？有没有好的开源无限滚动解决方案？任何提示/信息/代码将不胜感激。

谢谢！

Answer 1

此功能在web中的kendo网格中可用（请参阅kendo网站中的虚拟滚动示例）。如何使用网格虚拟滚动和修改显示模板看起来像listview？

虚拟滚动网格的示例代码为：

 $("#yourList").kendoGrid({
        dataSource: {
            type: "json",                
            pageSize: 25,
            transport: {
                read: {
                    cache: false,
                    url: "controller/actionmethod",
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }
            }
        },

        height: 150,
        width: 50,
        pageable: true,
        //selectable: "multiple",
        scrollable: {
            virtual: true
        },

        columns: [ { field: "col1", title: "col1" }]

    });

Answer 2

我最终想出了一个解决方案。使用网格进行虚拟滚动并不是我想要的。我抛弃了listview并使用了数据源和普通的剑道模板渲染。

以下是它的工作原理...我有一个父div用于我的数据。我将一个事件附加到我的数据源更改事件中，一旦读取了新的数据页，父div就会获得一个附加在其中的子div，其中将呈现新的数据页。到目前为止，这对我来说完美无缺。

所以我的DOM看起来像这样。

<div id="EndlesslyScrollabledata" >
    <div id="DataPage1">
       .....
   </div>
    <div id="DataPage2">
       .....
   </div>
</div>
<button> Load more data </button>

每次点击加载更多数据都会将数据源移动到下一页，附加下一个“DataPage”并使用附加的“DataPage”中的数据渲染模板。

Answer 3

我找到了一个使用dataBinging事件来模拟此行为的解决方案：

MVC代码：

@(Html.Kendo().ListView<your.custom.Class>()
    .Name("searchResults")
    .TagName("div")
    .ClientTemplateId("tptSearchResult")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Search", "ControllerName").Data("searchResults_AdditionalData");
        });


    })
)

你应该使用＆＃34; AdditionalData＆＃34;方法，如果您想向搜索服务发送搜索参数或其他内容。

Javascript代码：

function Search(page) {
    currentPage = page;
    if(page == 1) {
        searchResults = [];
    }

    $("#searchResults").data("kendoListView").dataSource.read();
}

function searchResults_AdditionalData(ev) {
    return {
        code: $("#txtSearchCode").val(),
        pageNumber: currentPage,
        pageSize: pageSize
    };
}

var currentPage = 1;
var pageSize = 20;
var searchResults = [];
$(document).ready(function () {

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) {

        if(searchResults.length != (currentPage * pageSize)) {
            if(!!ev && !!ev.items && ev.items.length == pageSize) {
                $("#btnLoadMoreData").show();
            } else {
                $("#btnLoadMoreData").hide();
            }

            searchResults = $.merge(searchResults, ev.items);
            this.dataSource.data(searchResults);
            this.dataSource.sync();
        }

    });
});

只剩下一件事：在同步后滚动到列表中第一个添加的元素。

使用web listview实现无限滚动

3 个答案: