Kendo UI Mobile + AngularJS アプリケーションを構築しています。可変数の結果を含むリストビューがあり、5 から 500 の間の任意の数になる可能性があります。
Android でのリストビューのスクロールが悪い。途切れ途切れで、指で与える速度に反応しないように感じます. 高速で上にスライドしても、高速ではなくゆっくりと下にスクロールします。
これは既知の問題ですか? それは私が間違っていることでしょうか？どうすればこれを修正できますか? 変更できるスクロール プロパティはありますか?
リストビュービュー:
<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"> #: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#€</span>
<span class="bold">{{::'res_size' | translate }}</span>
<span>#:size#m²</span>
</section>
</div>
</section>
</div>
</div>
</ul>
</kendo-mobile-view>
リストビューコントローラー関数
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);
};