javascript - Android 上的 ListView 滚动不稳定且缓慢

Question

我正在构建一个 Kendo UI Mobile + AngularJS 应用程序。我有一个结果数量可变的 ListView ，可以是 5 到 500 之间的任何结果。

Android 上的 ListView 的滚动效果很差。它很不稳定，感觉它对我用手指给出的速度没有反应。我可以快速向上滑动，它会慢慢向下滚动而不是快速滚动。

这是一个已知问题吗？难道是我做错了什么？我怎样才能解决这个问题？我可以更改任何滚动属性吗？

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 Controller 函数

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

我也遇到这个问题了。为了解决这个问题，我像这样初始化了 kendo 应用程序:

if (isChrome()) { window.kendoMobileApplication = new kendo.mobile.Application($(document.body), { useNativeScrolling:true});}

换句话说，如果您的目标是 Android 浏览器，则似乎需要 native 滚动。