Troubles with sliding when SlideContainer is inside of ScrollView on Android #72
Description
I have a special case: SlideContainer is inside vertical ScrollView. For iOS sliding works ok, but on Android it looks like the ScrollView intercepts the panning at some point and it gets pretty difficult to change the slides. Especially from left to right.
The code to test.
XML:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:Slides="nativescript-slides"
navigatingTo="navigatingTo">
<ScrollView id="scrollView">
<Repeater id="repeater" horizontalAlignment="center" width="100%"
items="{{ slideGroups }}">
<Repeater.itemTemplate>
<Slides:SlideContainer loaded="onSlideContainerLoaded"
horizontalAlignment="center">
</Slides:SlideContainer>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
</Page>
TS:
main-page.ts
import {EventData} from 'data/observable';
import {Page} from 'ui/page';
import {MyModel} from './main-view-model';
import * as labelModule from 'ui/label'
import * as slides from 'nativescript-slides/nativescript-slides'
export function navigatingTo(args:EventData) {
let page = <Page>args.object;
page.bindingContext = new MyModel();
}
export function onSlideContainerLoaded(args) {
let slideContainer = <slides.SlideContainer>args.object;
//Construct the slides
slideContainer.addChild(getSlide("Slide 1", "slide-1"));
slideContainer.addChild(getSlide("Slide 2", "slide-2"));
slideContainer.addChild(getSlide("Slide 3", "slide-3"));
slideContainer.addChild(getSlide("Slide 4", "slide-4"));
slideContainer.addChild(getSlide("Slide 5", "slide-5"));
}
function getSlide(labelText: string, className: string) {
let slide = new slides.Slide();
slide.className = className;
let label = new labelModule.Label();
label.text = labelText;
slide.addChild(label)
return slide;
}
main-view-model.ts
import {Observable} from 'data/observable';
import {ObservableArray} from 'data/observable-array';
export class MyModel extends Observable {
public slideGroups
constructor() {
super();
this.slideGroups = new ObservableArray([1,2,3])
}
}
CSS:
SlideContainer {
height: 400;
}
.slide-1{
background-color: darkslateblue;
}
.slide-2{
background-color: darkcyan;
}
.slide-3{
background-color: darkgreen;
}
.slide-4{
background-color: darkgoldenrod;
}
.slide-5{
background-color: darkslategray;
}
Label{
text-align: center;
width: 100%;
font-size: 35;
margin-top: 35;
horizontal-align: center;
vertical-align: center;
}
I understand this is not usual usage of the slides and probably a bad practice to have them inside ScrollView, but I have an app where I need to have them like this. Thank you for any advise or insight.