具有角砌体砖重叠的离子

Question

我正在为 iPad 优化移动应用程序（使用 angular1/ionic1 构建）并且遇到了问题。我正在尝试创建一个两列砌体效果，从左到右加载每个“卡片项目”（从网络请求返回）。我正在使用Angular-Masonry，它似乎在本地工作得很好，但当我在实际的 iPad 上测试时却不是很好。我正在我的 iPad Mini 2（大约 3 岁）上进行测试，当应用程序第一次加载时，大约一秒钟，所有从网络请求堆栈/重叠返回的图像在砌体效果开始之前相互重叠并按照我想要的方式对其进行格式化。该应用程序还使用离子无限滚动，因此当用户向下滚动时，会发出另一个网络请求，返回更多“卡片项目”。这些卡片项目在第一次呈现到页面时也会相互堆叠大约一秒钟。

我觉得这可能是一个性能问题。我认为这是因为 Angular Masonry 在本地运行良好，而且这种“重叠”错误仅在我在 iPad Mini 2 上进行测试时才会发生。

有人有使用 Angular-Masonry 和 Ionic 应用程序的经验吗？几天来我一直在努力解决这个问题，但无法确定到底出了什么问题。

您可以在这里看到我在其中包含 Angular-Masonry 指令“masonry”到包含 div 和“masonry-brick”到每个“card item”。

<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)？您要确保在 Masonry 重新计算布局之前加载所有图像，否则您会遇到您提到的重叠问题，因为 Masonry 需要知道对象的大小，并且在加载图像之前它无法正确知道。

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