如何在kendo-list-view滚动

时间:2016-05-09 07:37:14

标签: angularjs kendo-mobile angular-kendo

我正在使用Angular Kendo Mobile构建跨平台应用程序。

我有一个使用“kendo-list-view”的剑道列表。

<div kendo-list-view > 

我希望在用户在我的控制器中滚动此列表时获得一个事件。

我也尝试使用纯角度代码来获取滚动事件,如下面的问题所述。

Bind class toggle to window scroll event

但在我的情况下没有任何反应,指令内的代码也没有被调用。

更新

我的HTML列表视图如下:

<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">

    <kendo-mobile-header >
        <kendo-mobile-nav-bar style="background-color: gray">
            <kendo-view-title style="color: white"></kendo-view-title>
            <kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
        </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <div class="myListMainDiv">
        <div kendo-list-view 
             id="myListViewDiv"
             class="myListViewDiv"
             k-template="templates.myListViewItem" 
             k-data-source="myService.listDataSource" 
             ng-show="showListSelected"
             ></div>
   </div>

   <script id="myListViewItem" type="text/x-kendo-template">
        <div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
           {{dataItem.name}}
        </div>
   </script>

</kendo-mobile-view>

当用户选择使用kendo.mobile.application.navigate("MyList.html");导航到此页面时,我在我的根页面中加载此页面。当此页面的控制器加载时,我使用new kendo.data.DataSource创建了列表,并且已将new kendo.data.ObservableArray附加到我的数据源。

1 个答案:

答案 0 :(得分:1)

您可以从Kendo Mobile View的Scroller获取滚动事件, 例如,如果您的视图为id="myListScreen"

    var kendoView = $('#myListScreen').data().kendoMobileView;
    var scroller = kendoView.scroller;

    scroller.bind("scroll", function(e) {
        console.log(e.scrollTop);
        console.log(e.scrollLeft);
    });

您可以找到有关剑道卷轴here on their documentation

的更多信息