离子/角大图像列表,滚动冻结

时间:2017-01-11 17:08:48

标签: angularjs performance ionic-framework scroll angularjs-ng-repeat

我的离子(1)应用程序中有一个链接和图像列表。我正在使用collection-repeat,但它超级慢!

我切换到网格列表,因此我们的用户可以更好地查看图片:https://www.youtube.com/watch?v=dnG5ZdC0NoA

Grid list view

在视频中,每当您看到一个项目突出显示时,我的手指就无法抓住"卷轴......超级烦人......

我知道如何改进滚动以及过渡到这个列表视图真的很长?

非常感谢你的帮助

<div class="scrollContainer boardsTab">
            <ion-scroll zooming="false" direction="y" overflow-scroll="false">
                <!-- <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
                </ion-refresher> -->
                <div class="loadingboards" ng-if="!transitionFinished">
                    <ion-spinner class="spinner spinner-ios">
                    </ion-spinner>
                    <br/>
                    Loading boards list...
                </div>
                <div class="boardselection firstScreen" ng-if="transitionFinished">
                    <ion-item collection-repeat="item in prodataSelect | orderBy:data.sort | filter: data.selectBrand.brand:true | filter: data.selectName.name | filter: generalSearchFunc | filterObj:['brand','modelStrict']" item-width="25%" item-height="35%" item-render-buffer="8">
                        <a class="optionfuninit item-content" data-proid="{{item.id}}" ng-click="whatToDo(item.id,$event);" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))">
                            <div class="listviewTrophy" ng-if="isWinning(item.id)">
                                <i class="icon ion-trophy"></i>
                            </div>
                            <i class="icon ion-female" ng-show="item.gender == 'female'"></i>
                            <p class="flex-caption" fittext fittext-min="10" fittext-max="15" ng-bind="item.modelStrict" > 
                            {{item.modelStrict}}
                            </p>
                            <div class="imagebox">
                                <img class="imageoptionsmodel " ng-src="{{imagesUrls[item.imageName]}}"/>
                            </div>
                        </a>

                    </ion-item>
                </div>
            </ion-scroll>
        </div>

0 个答案:

没有答案