Scrollview navigate() and next() method is not working

Gesture enabled responsive lists
1

Hello,

I’m trying to invoke Scrollview navigation dynamically.

Here is my html

<div class="md-paging">
	<mbsc-scrollview [options]="contentSettings" #contentView>
		<mbsc-scrollview-item id = "seref" >
			<h3>Şeref Altındal</h3>
			<Button
					 (click)="contentView.instance.navigate('ahmet')">İleri</Button>
		</mbsc-scrollview-item>
		<mbsc-scrollview-item id = "ahmet" >
			<h3>Ahmet GÜL</h3>
		</mbsc-scrollview-item>
	</mbsc-scrollview>
</div>

When I click the button, it navigates to id = “ahmet” and returns back immediatelly. I mean, navigation is not working. Navigation from UI ( by hand ) is working.

Here is my typescript file

contentSettings: MbscScrollViewOptions = {
lang: ‘tr’,
theme: ‘ios’,
themeVariant: ‘light’,
layout: 1,
paging: true,
threshold: 10,
cssClass: ‘md-page’,
onItemTap: (event, inst) => {
console.log(event);
},
onAnimationStart: (event, inst) => {
console.log(event);
},
};

This is what written in console.

image
image993×147 6.52 KB

I could not understand why navigate method does not work. Do you have any solution for this problem ?

2

Hi @semih.tosun,

This looks like a bug on our end and I need to look deeper into it to see where the issue comes from.
An alternative solution is that, use the stopPropagation(). For example:

HTML:

<div class="md-paging">
    <mbsc-scrollview [options]="contentSettings" #contentView>
        <mbsc-scrollview-item id="seref">
            <h3>Şeref Altındal</h3>
            <Button (click)="checkClick($event, contentView)">İleri</Button>
        </mbsc-scrollview-item>
        <mbsc-scrollview-item id="ahmet">
            <h3>Ahmet GÜL</h3>
        </mbsc-scrollview-item>
    </mbsc-scrollview>
</div>

TS:

...

checkClick(ev, inst) {
    ev.stopPropagation();
    inst.instance.navigate('ahmet');
}