Keep the positions of a slider and a page in sync. This sounds straightforward but there’s a catch: the page/slide will stop moving after the first run, if we don’t take some special care.
Page
props:
currentPage
onChangePage
Slider
props (I’m using this one in the example)
value
onValueChange
We’ll run into an infinite loop if we write the code override like this:
export const Page: Override = () => {
return {
currentPage: data.currentPage,
onChangePage(value) {
data.currentPage = value;
}
};
};
You see, if the onChangePage
event is fired, it’ll set data.currentPage
which will call onChangePage
again!
To prevent this from happening, we’ll use a conditional to guard it:
export const Page: Override = () => {
return {
currentPage: data.currentPage,
onChangePage(value) {
if (data.currentPage !== value) {
data.currentPage = value;
}
}
};
};
PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!
PPS: See other pro tips, or share / request a new tip.
Want the complete source file? Enter your email address below:
I'll also send you new tips when available. No spam, unsubscribe any time!
© 2019 jimu Labs, Inc.