Hello, I am using collection repeat on android.
And I am encountering two problems.
The first one is the android app crash on Samsung Galaxy note 3 when I am scrolling too fast, e.g. large swipe.
I believe this one is easy to understand. I guess it cause by the infinite scroll.
The Second one is it has wrong calculation on y-axis on -webkit::translate3d(x, y, z)
This issue is a bit weird. It happen when I scroll back from the bottom. I saw the y-axis has 18px different of what I expect.
The height of the item in the screenshot should be 261px. But sometime, the translate will become translate3d(0, 243, 0). I have no ideas which part cause the error.
Here are my related code.
ProductList.html
<ion-view title={{navTitle}}>
<!-- The Filter bar -->
<ion-content>
<div class="button-bar item" style="padding:0px; height:47px;">
<a class="button" style="height:44px;border-color:#EEEEEE;background-color:#FFFFFF;font-family:HelveticaNeue;font-size:9px;font-weight:bold;color:#006FBB" ng-click='triggerFilter("{{filterTitle}}")' ng-repeat="filterTitle in filtersTitles">{{toUppercase(filterTitle)}}</a>
</div>
</ion-content>
<ion-content style="margin-top:47px; height:{{getScrollViewHeight()}};"
has-header="true"
ng-show='activeFilterTitle == ""'
delegate-handle="mainScroll">
<div ng-show="screenReady" id="search-box" class="bar bar-header item-input-inset">
<ion-search class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="data.searchQuery" ng-enter="searchEnter()"/>
<i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i>
</ion-search>
<button class="button button-clear" ng-click="clearSearch()">
Cancel
</button>
</div>
<div class="list">
<div class="item"
collection-repeat="product in productsData"
collection-item-width="'50%'"
collection-item-height="getItemHeight()"
ng-click='productTap(product)'
ui-sref='app.productDetail()'
ng-style="{width: '50%', padding: '0px', height:getItemHeight()}" >
<img style="width: 70%; margin: 15%;" href="#/app/playlists" src="{{product.images[0].mediumURL}}" />
<div class="product-list-brand" >{{toUppercase(product.brand.name)}}</div>
<br/>
<div class="product-list-price" >${{product.price}} USD</div>
<br/>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
<ion-content style="top:91px;" class="has-header" ng-show='activeFilterTitle != ""'>
<ion-list>
<ion-item style="text-align:center;" ng-click='showIndex($index)' ng-repeat="filter in filterData">
<span ng-if='filter.isPriceType == true'>{{filter.from}} and {{filter.to}}</span>
<span ng-if='filter.isPriceType == false' style="font-family:HelveticaNeue;font-size:12px;font-color:#006FBB;">{{filter.terms}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
ProductListController.js
Get Item Height
$scope.getItemHeight = function() {
var halfScreenWidth = screen.width / 2.0;
return halfScreenWidth * 1.35;
};
Load More Products
$scope.loadMore = function() {
ploader.loadProductsWithCompleteBlock(function(error) {
if (error != null && error != 990) {
if (error == 991) {
console.log('no more product');
}else {
alert('loading error ' + error);
}
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};