LAFONT
June 13, 2016, 7:26pm
1
Hi,
I m trying to use virtual scroll with gestures. When i add swipeLeft or swipeRight to ion-card, the vertical scroll stopped working.
<ion-list [virtualScroll]="arrayArticles" approxItemHeight="200px"
approxHeaderHeight="0px" approxFooterHeight="0px"
[footerFn]="showFooter">
<ion-card *virtualItem="let article;let idx = index" (click)="itemTapped($event, article)"
[virtualTrackBy]="id"
(swipeleft)="articleSwipeLeft(article,$event, idx)"
(swiperight)="articleSwipeRight(article,$event, idx)"
[ngClass]="{'swipe-left': article.id == swipeLeft_articleId}"
class="article-ion-card">
<ArticleImage [article]="article"></ArticleImage>
<div class="article-card-title" [innerHTML]="article.title"></div>
<div class="article-card-subtitle" [innerHTML]="(article.publishedDate | amTimeAgo) + ' on ' + article.sourceTitle"></div>
</ion-card>
</ion-list>
Is there a way to have the vertical scroll and swipeleft/swiperight work together?
Hi LAFONT, I just point that:
LAFONT:
[virtualTrackBy]=“id”
needs to be used on the ion-list component next to [virtualScroll]. I did the same mistake and it gave me some errors. Maybe it’s related with your issue.
opened 05:10PM - 29 Sep 16 UTC
closed 01:55PM - 30 Sep 16 UTC
needs: reply
Hello,
I migrated my project to Ionic2.rc0, and i have the following error:
``… `
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-card'.
1. If 'ion-card' is an Angular component and it has 'virtualTrackBy' input, then verify that it is part of this module.
2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
(" (click)="ViewArticle($event, article, null)"
[ERROR ->][virtualTrackBy]="id"
```
To isolate the problem, I created a new project and I added the virtual scroll as below:
Template:
```
<ion-list [virtualScroll]="items">
<ion-list-header>Follow us on Twitter</ion-list-header>
<ion-item *virtualItem="let item">
<ion-icon name="ionic" item-left></ion-icon>
{{item}}
</ion-item>
</ion-list>
```
Component:
```
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
templateUrl: 'contact.html'
})
export class ContactPage {
public items: Array<string> = [];
constructor(public navCtrl: NavController) {
for(let i = 0; i < 100; i++)
{
this.items.push('name' +i);
}
}
}
```
When i go to the contact page, i have the following error:
```
ORIGINAL EXCEPTION: Cannot read property 'indexOf' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'indexOf' of undefined
at calcHeight (http://localhost:8100/build/main.js:64758:21)
at calcDimensions (http://localhost:8100/build/main.js:64740:26)
at readDimensions (http://localhost:8100/build/main.js:64952:17)
at VirtualScroll.update (http://localhost:8100/build/main.js:64964:9)
at VirtualScroll.ngAfterContentInit (http://localhost:8100/build/main.js:64919:18)
at DebugAppView._View_ContactPage0.detectChangesInternal (ContactPage.ngfactory.js:219:65)
at DebugAppView.AppView.detectChanges (http://localhost:8100/build/main.js:10805:14)
at DebugAppView.detectChanges (http://localhost:8100/build/main.js:10910:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8100/build/main.js:10831:19)
at DebugAppView.AppView.detectChangesInternal (http://localhost:8100/build/main.js:10816:14)
ERROR CONTEXT:
DebugContext {_view: _View_ContactPage0, _nodeIndex: 11, _tplRow: 9, _tplCol: 2}
Uncaught Error: Error in ./ContactPage class ContactPage - inline template:9:2 caused by: Cannot read property 'indexOf' of undefined
```
Cordova CLI: 6.3.0
Gulp version: CLI version 1.2.2
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v5.12.0