带棱角-砖块重叠的离子
我正在为iPad优化一个移动应用程序(使用angular1/ionic1构建)，并且遇到了一些问题。我正在尝试创建一个两列的砖石效果，从左到右加载每个“卡片项目”(从网络请求返回)。我使用的是Angular-Masonry，它在本地似乎工作得很好，但在实际的iPad上测试时却不是很好。我正在测试我的iPad Mini 2(大约3岁)，当应用程序第一次加载时，大约一秒钟，所有从网络请求堆栈/重叠返回的图像在砖石效果开始发挥作用并按我想要的方式格式化之前相互重叠。该应用程序还使用离子无限滚动，因此当用户向下滚动时，会发出另一个网络请求，返回更多的“卡片项目”。在第一次呈现到页面时，这些卡片项目也会堆叠在彼此的顶部大约一秒钟。
我觉得这可能是一个性能问题。我认为这是因为Angular Masonry在本地运行得很好，而这种“重叠”错误只有在我的iPad Mini 2上测试时才会发生。
有没有人有在离子应用中使用Angular-Masonry的经验？几天来，我一直在努力解决这个问题，但无法准确指出问题出在哪里。
你可以在这里看到，我将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>
回答 1
Stack Overflow用户
发布于 2017-08-18 10:58:28
您是否在使用ImagesLoaded模块(https://github.com/desandro/imagesloaded)？你要确保在Masonry重新计算布局之前所有的图像都被加载了，否则你会遇到你提到的重叠问题，因为Masonry需要知道对象的大小，并且在图像加载之前它不能正确知道。
我在这里做了一个离子v1 + Masonry + imagesLoaded + InfiniteScroll的完整演示：https://github.com/viking2917/ionicMasonryExample
https://stackoverflow.com/questions/45258279
复制相似问题
腾讯云开发者
