帶角砌體磚的離子

Question

我正在為iPad優化移動應用程序（使用angular1 / ionic1構建），並且遇到了問題。 我正在嘗試創建兩列砌體效果，以從左到右加載每個“卡片項目”（從網絡請求中返回）。 我正在使用Angular-Masonry ，它在本地似乎工作得很好，但是當我在實際的iPad上進行測試時效果不是很好。 我正在iPad Mini 2（大約3歲）上進行測試，當應用首次加載時，大約一秒鍾，從網絡返回的所有圖像在砌體效果開始之前都要求彼此疊加/重疊按照我想要的方式進行格式化。 該應用程序還使用離子無限滾動功能，因此當用戶向下滾動時，會發出另一個網絡請求，該請求將返回更多“卡片項目”。 這些卡片項目在首次呈現到頁面時，還會在彼此之上堆疊約一秒鍾。

我覺得這可能是性能問題。 我認為這是因為Angular Masonry在本地工作得很好，並且這種“重疊”錯誤僅在我在iPad Mini 2上進行測試時才會發生。

有沒有人有使用Ionic Apps的角度砌築的經驗？ 幾天來我一直在努力解決此問題，並且無法查明到底出了什么問題。

您可以在此處看到我在其中向包含div的Angular-Masonry指令“ masonry”和對每個“ card item”包括“ masonry-brick”的位置。

<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