Question

我正在为iPad优化移动应用程序（使用angular1 / ionic1构建）并且遇到了问题。我正在尝试创建一个双列砌体效果，加载每个＆＃34;卡片项目＆＃34; （从网络请求返回）从左到右。我正在使用Angular-Masonry，这似乎在本地非常好用，但是当我在实际的iPad上测试时效果不是很好。我在我的iPad Mini 2（大约3岁）上进行测试，当应用程序首次加载时，大约一秒钟，所有从网络请求堆栈返回的图像堆叠/重叠在砖石效果开始之前以我想要的方式格式化它。该应用程序还使用离子无限滚动，因此当用户向下滚动时，会发出另一个网络请求，返回更多＆＃34;卡片项目＆＃34;。这些卡片物品在首次渲染到页面时也会叠加在一起大约一秒钟。

我觉得这可能是一个性能问题。我之所以这么认为是因为Angular Masonry在当地工作非常好，而且这种重叠＆＃34;只有当我在iPad Mini 2上测试时才会出现错误。

有没有人有使用Angular-Masonry和Ionic Apps的经验？我一直在努力解决这个问题几天，但我无法确定究竟出了什么问题。

你可以在这里看到我在哪里包括Angular-Masonry指令＆＃34;砌体＆＃34;到了包含的div和＆＃34;砌砖 - ＆＃34;每个＆＃34;卡片项目＆＃34;。

<ion-content class="articleContent" scroll="false">
    <ion-slide-box slide-tabs-scrollable="true" show-pager="false" on-slide-changed="changeSlide(index)" bounce="false" ion-slide-tabs>
        <ion-slide ng-repeat="tab in contents track by $index" ion-slide-tab-label="{{tab.category}}">
            <ion-content>
              <div class="ipadDiv" ng-switch="tablet">
                  <div ng-switch-when="true" column-width="60" masonry load-images="false">
                    <ion-list ng-if="tab.posts.length > 0">
                        <ion-item class="masonry-brick card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
                            <img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
                            <div class="text">
                                <strong ng-bind-html ="::post.title"></strong>
                                <p class="article-date"> {{::postDate(post.date)}}</p>
                            </div>
                        </ion-item>
                        <div ng-if="showInfiniteLoader && tab.posts.length > 0">
                            <ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
                            <ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
                        </div>
                        <br>
                    </ion-list>
                  </div>
                  <div class="masonryDiv" ng-switch-when="false">
                    <ion-list ng-if="tab.posts.length > 0">
                        <ion-item class="card" ng-repeat="post in tab.posts track by $index" type="item-text-wrap" ng-click="goto(tab.category, $index)">
                            <img ng-src="{{::getThumbnail(post.thumbnail)}}" ng-if="::getThumbnail(post.thumbnail) != false">
                            <div class="text">
                                <strong ng-bind-html ="::post.title"></strong>
                                <p class="article-date"> {{::postDate(post.date)}}</p>
                            </div>
                        </ion-item>
                        <div ng-if="showInfiniteLoader && tab.posts.length > 0">
                            <ion-infinite-scroll distance="15%" ng-if="!showLoadMore"></ion-infinite-scroll>
                            <ion-infinite-scroll on-infinite="loadMoreArticles(tab.category)" distance="15%" ng-if="showLoadMore"></ion-infinite-scroll>
                        </div>
                        <br>
                    </ion-list>
                  </div>
              </div>
            </ion-content>
        </ion-slide>
    </ion-slide-box>
</ion-content>

Answer 1

您使用的是ImagesLoaded模块（https://github.com/desandro/imagesloaded）吗？你想确保在砌体重新计算布局之前加载所有图像，否则你会得到你提到的重叠问题，因为砌体需要知道对象的大小，并且在图像加载之前它无法正确知道。

我在这里制作了Ionic v1 + Masonry + imagesLoaded + InfiniteScroll的完整演示：https://github.com/viking2917/ionicMasonryExample

离子与角 - 砖砌体重叠

1 个答案: