Is it possible to have horizontal scrolling in an item list? What is the best way to achieve it?
Using ‘ion-slides’ or ‘ion-scroll’?
1 Like
I suppose using http://ionicframework.com/docs/v2/api/gestures/SlideGesture/ together with dynamic loading https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.tv9buudjk could be a solution.
Thank you for your reply.
For a small number of items (<10). Is it necessary to have the dynamic loading?
I will try and create some sliding items and see what happens.
I was able to create sliding images but it’s on a full page with chevrons on it (in yellow - left-side of image).
I would like to get something like Airbnb’s recently viewed items on its home page (right-side of image below)
Is this possible to do with Ionic 2? Have part of the page with horizontal item scrolling? How to achieve it?
I am thinking about injecting the slide template without the chevron into the main page. Is it the way forward? Would it be possible to have an example of nested views in Ionic 2?
With the code below, I was able to get the following view. I would like to take out the blank spaces left before and after ‘ion-slides’ (the red crosses)
In the Ionic 2 documentation, I don’t see any options or method to adjust the slider’s size.
In the Swiper API, I can see the ‘autoHeight’ parameter which adjusts the slider’s size to the current slide.
http://idangero.us/swiper/api/
Now, I am trying to figure out how to use Swiper’s API with getSlider() method of ‘ion-slides’. Any ideas on this?
I have the following code and getting this error when trying to call the getSlider() method of ‘ion-slides’:
ORIGINAL EXCEPTION: TypeError: this.slider is undefined
I am trying to access the autoHeight parameter of the swiper API in order to get rid of the blank spaced in ‘ion-slides’.
TypeScript File
import {Component, ViewChild} from '@angular/core';
import {NavController, Slides} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
@ViewChild('mySlider') slider: Slides;
SwiperInstance: any = this.slider.getSlider();
items: Array<{name: string, image: string, color: string}>;
itemstry2: string[] = ["One Piece", "Naruto", "Bleach", "Boruto", "Etc", "Life itself!"];
mySlideOptions = {
loop: true,
//SwiperInstance.autoHeight = true
};
constructor(private navController: NavController) {
this.items = [
{name: "One Piece", image: "http://bit.ly/22uwN0m", color:"yellow"},
{name: "Image 2", image: "http://bit.ly/29FOl81", color:"#2662F7"},
{name: "Image 3", image: "http://bit.ly/29qNtzK", color:"#FD4B4B"},
{name: "Image 4", image: "http://bit.ly/29vtmQt", color:"#4BC14B"},
{name: "Image 5", image: "http://bit.ly/29wxiTy", color:"orange"}
];
}
goToSlide() {
this.slider.slideTo(4, 500);
}
onSlideChanged() {
let currentIndex = this.slider.getActiveIndex();
let slidelength = this.slider.length();
console.log("Current index is", currentIndex);
}
}
Html File
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home">
<ion-list>
<ion-item *ngFor="let item of itemstry2">
{{item}}
</ion-item>
</ion-list>
<ion-slides #mySlider (ionDidChange)="onSlideChanged()" [options]="mySlideOptions" class="greencol">
<ion-slide *ngFor="let item of items" class="yelcol" [ngStyle]="{'background-color': item.color}" >
{{item.name}}
<img src="{{item.image}}"/>
<button light (click)="goToSlide()">Go to Last Slide</button>
</ion-slide>
</ion-slides>
<ion-list>
<ion-item *ngFor="let item of itemstry2">
{{item}}
</ion-item>
</ion-list>
</ion-content>try calling
SwiperInstance: any this.slider.getSlider();
this statement inside function
ngAfterViewInit() {}
viewchild elements can be accessedwhen the view ihas been initialized
Thanks for your reply.
I got the following error messages with this code.
ngAfterViewInit() { SwiperInstance: any = this.slider.getSlider(); }
Errors
TypeScript error - Error TS7028: Unused label.
TypeScript error - Error TS2304: Cannot find name 'any'.
I also tried the following code and got additonal errors.
ngAfterViewInit() { SwiperInstance: any = this.slider.getSlider(); this.SwiperInstance.autoHeight = true; }
Errors:
TypeScript error - Error TS7028: Unused label.
TypeScript error - Error TS2304: Cannot find name 'any'.
TypeScript error - Error TS2339: Property 'SwiperInstance' does not exist on type 'HomePage'.
And I tried to call @ViewChild in ngOnInit but got a TS Declaration expected error
ngOnInit() { @ViewChild('mySlider') slider: Slides; SwiperInstance: any = this.slider.getSlider(); }
Error: TypeScript error - Error TS1146: Declaration expected.
the declataion @ViewChild should be before constructor and then use
SwiperInstance = this.slider.getSlider();
without any
export class SwiperClass {
@ViewChild('mySlider') slider: Slides;
SwiperInstance : any;
ngAfterViewInit() {
this.SwiperInstance = this.slider.getSlider();
this.SwiperInstance.autoHeight = true;
}
}
1 Like
Thank you!!
This code is working fine.
ngAfterViewInit() { this.SwiperInstance = this.slider.getSlider(); }
But with the additional line this.SwiperInstance.autoHeight = true, it gives me a console error.
ngAfterViewInit() { this.SwiperInstance = this.slider.getSlider(); this.SwiperInstance.autoHeight = true; }
ORIGINAL EXCEPTION: TypeError: this.SwiperInstance is undefined
So there must be another way to access the autoHeight parameter in the Swiper API.
If your problem is only to change slider height … you can define it in css as some fixed height
1 Like
Simple and efficient. 
My second problem solved by you. Thanks alot =)
1 Like
Hi! I’ve got a question. Is your [option] property working properly?
I tried the option ‘slidesPerView: 3’, and it didn’t change the view at all!!!