javascript - ionic 滚动有白色覆盖层滞后

Question

我遇到的问题是当我像这样滚动页面加载时 /image/yHNLx.jpg

这是我的代码

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

作为 IDE，我使用 Visual Studio，它在后台使用 cordova CLI 来打包和运行应用程序。

Answer 1

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

请参阅此示例:http://codepen.io/ionic/pen/0c2c35a34a8b18ad4d793fef0b081693

您可以像示例中一样将两个项目设置为彼此相邻。

此外，如果您还没有这样做，您可能需要考虑禁用 ionic 中的 javascript 滚动。众所周知，JavaScript 滚动存在一些问题。您可以在 config 中像这样全局执行此操作:

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

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

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

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

希望这些可以对您有所帮助!