ListView прокрутка изменчивый и медленный на Android

Question

Я создаю приложение Kendo UI Mobile + AngularJS. У меня есть список с переменным числом результатов, может быть что угодно между 5 и 500.

Прокрутка списка на Android - это плохо. Он изменчив и чувствует, что он не реагирует на скорость, которую я даю пальцем. Я мог бы быстро продвинуться вверх, и он медленно прокручивался вниз, а не быстро.

Это известная проблема? Может быть, это то, что я делаю неправильно? Как я могу это исправить? Можно ли изменить свойства прокрутки?

вид ListView:

<kendo-mobile-view id="result" ng-controller='resultController' k-reload="true">   
    <kendo-mobile-header> 
     <section kendo-mobile-nav-bar class="navbar"> 
      <kendo-mobile-view-title>{{::resultsLength}} {{::'res_header_result' | translate }}</kendo-mobile-view-title> 
      <kendo-mobile-button k-align="'left'" k-icon="'back'" ng-click="back()"></kendo-mobile-button> 
      <kendo-mobile-button ng-click="collapse()" k-transition="'slide:left'" k-align="'right'" k-icon="'sort'" data-toggle="collapse" data-target="#sortmenu" aria-expanded="false" aria-controls="collapseExample" style="margin-right:1em;"></kendo-mobile-button> 
      <kendo-mobile-button k-transition="'slide:left'" k-align="'right'" k-icon="'filter'" href="#view/filter.html"></kendo-mobile-button> 
     </section> 
    </kendo-mobile-header> 
    <div class="collapse" id="sortmenu"> 
     <div class="list-group"> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('0');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_0" class="filter_arrow"></span>{{::'res_newest_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('10');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_10" class="filter_arrow"></span>{{::'res_rent_filt' | translate }}{{::'res_asc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('11');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_11" class="filter_arrow"></span>{{::'res_rent_filt' | translate }}{{::'res_desc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('20');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_20" class="filter_arrow"></span>{{::'res_size_filt' | translate }}{{::'res_asc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('21');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_21" class="filter_arrow"></span>{{::'res_size_filt' | translate }}{{::'res_desc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('40');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_40" class="filter_arrow"></span>{{::'res_available_fr_filt' | translate }}{{::'res_asc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('41');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_41" class="filter_arrow"></span>{{::'res_available_fr_filt' | translate }}{{::'res_desc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('50');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_50" class="filter_arrow"></span>{{::'res_available_to_filt' | translate }}{{::'res_asc_filt' | translate }}</a> 
      <a class="list-group-item" data-toggle="collapse" ng-click="setSort('51');" href="#sortmenu" aria-expanded="false" aria-controls="collapseExample"><span id="filter_item_51" class="filter_arrow"></span>{{::'res_available_to_filt' | translate }}{{::'res_desc_filt' | translate }}</a> 
     </div> 
    </div> 

    <ul kendo-mobile-list-view id="resultList" k-pull-to-refresh="true" k-endless-scroll="true" k-on-click="showAdDetail(kendoEvent)"> 
     <div class="panel panel-default result_listitem" k-template> 
      <div class="panel-body"> 
       <section class="bold font-size-small" style="width: 100%; line-height: 140%;"> 
        <span class="bold">&nbsp;&nbsp;#:title#</span> 
       </section> 
       <section class="result-content"> 
        <div class="col-md-8"> 
         <section class="margin-top-small"> 
          <span class="bold">{{::'res_rent' | translate }}</span> 
          <span>#:rent_total#&euro;</span>&nbsp;&nbsp; 
          <span class="bold">{{::'res_size' | translate }}</span> 
          <span>#:size#m&sup2;</span> 
         </section> 
        </div> 
       </section> 
      </div> 
     </div> 
    </ul> 

</kendo-mobile-view> 

функция управления ListView

function getData(link) { 
    $scope.source = new kendo.data.DataSource({ 
     type: "json", 
     transport: { 
      read: { 
       url: link 
      } 
     }, 
     requestEnd: function(e) { 
      var results = e.response._embedded.offers; 
      getLocalStorage.addObjectToLocalStorage(results, 'results'); 
      kendo.mobile.application.hideLoading(); 
     }, 
     schema: { 
      total: function(response) { 
       $scope.resultsLength = response._embedded.offers.length; 
       return $scope.resultsLength; 
      }, 
      data: "_embedded.offers"  
     }, 
     serverPaging: true, 
     pageSize: 16 
    }); 
    $("#resultList").data('kendoMobileListView').setDataSource($scope.source); 

}; 

Answer 1

У меня была эта проблема тоже. Чтобы решить эту проблему, я инициализации приложения кендо, как так:

если (isChrome()) { window.kendoMobileApplication = новый kendo.mobile.Application ($ (document.body), { useNativeScrolling: истинный }); }

Другими словами, кажется, что если вы ориентируетесь на браузер Android, вам нужна прокрутка.