ng-repeat + ion-infinite-scroll 不适用于真实 android
ng-repeat + ion-infinite-scroll doesn't work on real android
我已经使用 ionic 跨平台应用程序 2 周了,所以,我对此非常菜鸟。
现在,我发现 ng-repeat exactly like this 存在问题。
是的,收集重复可以解决问题,但会产生另一个问题。
就我而言,每个项目都有不同的大小,并且 collection-repeat 无法动态计算它。
这是我的列表重复:
<ion-list>
<ion-item class="list card" ng-repeat="feed in feeds" type="item-text-wrap" href="#/tab/feed/{{feed.id_geral}}">
<div class="item item-avatar">
<img width="50" src="http://192.168.1.14/vogo/files/perfil/p/{{feed.img_perfil}}">
<h2>{{feed.nome_perfil }}</h2>
</div>
<div class="item item-body">
<img ng-show="feed.img_link.length > 3"
class="full-image" src="{{feed.img_link}}">
<img ng-show="feed.video.length > 3"
class="full-image" src="https://i.ytimg.com/vi/{{feed.video}}/sddefault.jpg" />
<p>{{feed.post}}</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> Share
</a>
</div>
</ion-item>
</ion-list>
我一直在尝试通过这种方式解决
<div id="dummyRender" class="list card">
<div class="item item-avatar">
<img width="50" src="http://192.168.1.14/vogo/files/perfil/p/{{feed.img_perfil}}">
<h2>{{dummy.nome_perfil }}</h2>
</div>
<div class="item item-body">
<img ng-show="dummy.img_link.length > 3"
class="full-image" src="{{dummy.img_link}}">
<img ng-show="dummy.video.length > 3"
class="full-image" src="https://i.ytimg.com/vi/{{feed.video}}/sddefault.jpg" />
<p>{{dummy.post}}</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> Share
</a>
</div>
</div>
并在控制器上创建了一个函数来处理高度
var dummy = document.getElementById("dummyRender");
$scope.renderHeight = function (feedIten) {
$scope.dummy = feedIten;
return dummy.clientHeight;
};
拜访
<ion-item class="list card" collection-repeat="feed in feeds" type="item-text-wrap" href="#/tab/feed/{{feed.id_geral}}" item-height="renderHeight(feed)">
但它只适用于文本。
有人可以使用 ng-repeat 或 collection-repeat 或其他方法帮助我解决这个问题吗?
谢谢,对不起我的英语水平!
经过大量的工作,这是我悲伤的答案
这没有解决方案,它是 android 4.4< issue 并且无法修复,所以如果你想,你不能将 ng-repeat 与 ion-infinite-scroll 一起使用接受 androids 4.4 及更低版本。
而且您可以只使用具有相同大小的重复列表,还不能使用动态大小。
我已经使用 ionic 跨平台应用程序 2 周了,所以,我对此非常菜鸟。
现在,我发现 ng-repeat exactly like this 存在问题。 是的,收集重复可以解决问题,但会产生另一个问题。 就我而言,每个项目都有不同的大小,并且 collection-repeat 无法动态计算它。 这是我的列表重复:
<ion-list>
<ion-item class="list card" ng-repeat="feed in feeds" type="item-text-wrap" href="#/tab/feed/{{feed.id_geral}}">
<div class="item item-avatar">
<img width="50" src="http://192.168.1.14/vogo/files/perfil/p/{{feed.img_perfil}}">
<h2>{{feed.nome_perfil }}</h2>
</div>
<div class="item item-body">
<img ng-show="feed.img_link.length > 3"
class="full-image" src="{{feed.img_link}}">
<img ng-show="feed.video.length > 3"
class="full-image" src="https://i.ytimg.com/vi/{{feed.video}}/sddefault.jpg" />
<p>{{feed.post}}</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> Share
</a>
</div>
</ion-item>
</ion-list>
我一直在尝试通过这种方式解决
<div id="dummyRender" class="list card">
<div class="item item-avatar">
<img width="50" src="http://192.168.1.14/vogo/files/perfil/p/{{feed.img_perfil}}">
<h2>{{dummy.nome_perfil }}</h2>
</div>
<div class="item item-body">
<img ng-show="dummy.img_link.length > 3"
class="full-image" src="{{dummy.img_link}}">
<img ng-show="dummy.video.length > 3"
class="full-image" src="https://i.ytimg.com/vi/{{feed.video}}/sddefault.jpg" />
<p>{{dummy.post}}</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> Share
</a>
</div>
</div>
并在控制器上创建了一个函数来处理高度
var dummy = document.getElementById("dummyRender");
$scope.renderHeight = function (feedIten) {
$scope.dummy = feedIten;
return dummy.clientHeight;
};
拜访
<ion-item class="list card" collection-repeat="feed in feeds" type="item-text-wrap" href="#/tab/feed/{{feed.id_geral}}" item-height="renderHeight(feed)">
但它只适用于文本。
有人可以使用 ng-repeat 或 collection-repeat 或其他方法帮助我解决这个问题吗?
谢谢,对不起我的英语水平!
经过大量的工作,这是我悲伤的答案
这没有解决方案,它是 android 4.4< issue 并且无法修复,所以如果你想,你不能将 ng-repeat 与 ion-infinite-scroll 一起使用接受 androids 4.4 及更低版本。
而且您可以只使用具有相同大小的重复列表,还不能使用动态大小。