离子滚动是滞后的白色覆盖

Question

我遇到的问题是当我滚动页面时像这样逐个加载 http://imgur.com/sElBMCD

这是我的代码

categoryList.html

<ion-header-bar align-title="center" class="bar-stable">
    <h1 class="title">Best Wishes App</h1>
</ion-header-bar>
<ion-content class="padding" overflow-scroll="true">
    <div class="list">
        <div class="card responsive-card" ng-repeat="item in data">
            <a href="#/sublist/{{item.id}}">
                <div class="item item-image">
                    <img ng-src="{{item.image}}" alt="item image">
                </div>
                <div class="item item-divider">
                    {{item.categoryTitle}}
                </div>
            </a>
        </div>
    </div>
</ion-content>

app.js

angular.module('starter', ['ionic'])            
        .config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('list', {
                    url: '/',
                    templateUrl: 'template/categoryList.html',
                    controller: 'ListController'
                })                    
            $urlRouterProvider.otherwise("/");
        })
        .controller('ListController', ['$scope', '$http', '$state', '$ionicHistory', '$rootScope', function ($scope, $http, $state, $ionicHistory, $rootScope) {                
            console.log($rootScope.data);
            $rootScope.$watch('data',function(){
                $scope.data = $rootScope.data;
            })
        }])

由于我是 Angular 的新手，您可能需要详细说明您的答案。 :/

我正在使用 ionic-framework 版本 1.7

as IDE 我使用 visual studio，它在后台使用 cordova CLI 进行打包，运行应用程序。

Answer 1

如果您知道所有元素的高度都相同，您应该考虑使用离子学 collection-repeat 而不是 ng-repeat。

看这个例子：http://codepen.io/ionic/pen/0c2c35a34a8b18ad4d793fef0b081693

您可以像示例中那样将两个项目并排放置。

此外，如果您还没有这样做，您可能需要考虑禁用 javascript 离子滚动。众所周知，javascript 滚动有点问题。您可以在 config:

中像这样全局执行此操作

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.scrolling.jsScrolling(false);
})

最后但并非最不重要的一点是，如果以上都不起作用，您应该考虑对图像使用惰性加载程序，这样您就看不到 "lag"。我个人使用过 ionic-image-lazy-load 插件，它可以通过 bower 安装，效果很好。我的图片和你的一样闪烁。

插件：https://github.com/paveisistemas/ionic-image-lazy-load

示例：http://codepen.io/mvidailhet/pen/yNOGzY

希望这些对您有所帮助！

离子滚动是滞后的白色覆盖

Ionic scroll is lagggy with white overlay

javascript

angularjs

cordova

ionic-framework

ionic-view