I try to combine Tabbar + Carousel for a drag effect with Onsen UI
I have a little problem ;
When I add the Tabbar in the same page as the carousel, the carousel swipe does not work.
And when I put the tabbar in a different page of the carousel the swipe works well but I can not retrieve the current index (OnPostChange)
Someone has the solution please?
Thank you
I put the two codes that do not work below
First :
https://codepen.io/yohann3396/pen/brppxY
Second :
https://codepen.io/yohann3396/pen/jLqqdK
ons.bootstrap();
ons.ready(function() {
alert('test');
carousel.on('postchange', function(event) {
var test = carousel.getActiveIndex();
alert(test);
});
});
It's not possible in the current version. I'm sorry nobody answered you, I've been struggling to find a solution.
There is a workaround for a simple site. If you make a complete duplicate carousel for every tab, then you can change the page value to a distinct name. You must have a page for every tab, and you may not use duplicates, but you can link to a specific page in a carousel. The user wouldn't be able to tell they are actually on a separate carousel with a distinct template ID if you duplicate all of them.
Related
I am trying to clone TikTok comments modal (see gif below) where users should be able to scroll down to view more comments and once they scroll up and reach the top, they modal will be pulled down instead.
In my code, I enclosed the FlatList with PanGestureHandler. Currently, once the user reach the top of the comments and tried to swipe down, the modal does not move.
You can check the scroll value and on the basis of this value, you can apply the scroll down condition. Use this in FlatList and set state accordingly.
Hopefully, this will help you a lot
onMomentumScrollEnd={(event) => {
if(event.nativeEvent.contentOffset.y > 105){
setselectedbutton(2)
}else if(event.nativeEvent.contentOffset.y < 105){
setselectedbutton(1)
}
}}
you can use https://github.com/gorhom/react-native-bottom-sheet, this repo provide a BottomSheetFlatList which is exactly what you need
I am making a website using react-router v4 to navigate between views. So my layout have nav and footer, use Switch to switch different views.
I already add scrollToTop function to make it scroll to top between different views.I used the function from here https://reacttraining.com/react-router/web/guides/scroll-restoration
Let's say I have views Home and Solution. The problem is that inside the Solution view, I added another Switch ( child routes), so the path will be like this http://localhost:3000/solution/solution1.
So now when I clicked the child routes in Solution page, the page scroll to top which makes sense because the layout is wrapped by ScrollToTop function. But it is a switch tab, I don't want it to scroll to top, I want it to remain unchanged.
I tried to use ScrollToTopOnMount but no success.
Any ideas how to achieve this ? Thank in advance.
When in mobile view using Owl Carousel (Version 2 ) some of my sliders take up near the whole screen.
The carousel uses touch to slide left and right fine however when doing so the user cannot scroll the page up and down which makes it difficult to navigate the to the rest of the page.
Is there a way so that while sliding the scrolling for the page is still active?
Seems i had the touch-action property set to none disabling scrolling and zooming etc when touching on the items within the slide. I had to remove the below although i don't think this is default and i added it in at some point for some reason that i can't remember.
.owl-item {
touch-action: none;
}
I'm using Vuetify's toolbar scrolling techniques feature on a SPA that needs to scroll to the top of a container between each page transition. When I trigger this via javascript using scrollTop, the scroll works fine, but it doesn't seem to let Vuetify know that a scroll up has occurred and as a result the primary toolbar is missing. If a particular page isn't long enough to require a scroll, it becomes impossible to regain the primary toolbar.
Any suggestions on how I can scroll the user to the top of the container from javascript AND have Vuetify move the primary toolbar back into place would be much appreciated.
<v-toolbar :scroll-off-screen="true" :scroll-target="'#scrolling-techniques'">
https://codepen.io/developerplus/pen/mBbjBq
I've attached a codepen link demonstrating the issue. Once scrolled down to the bottom of the container, if the "Scroll to Top" button is clicked, i'd expect it to both take me to the top of the container, and reveal the primary menu.
I found a solution to my question. If you refer to the codepen in the question, you'll notice the example is now working. What was required was the following:
let event = new CustomEvent('scroll')
container.pageYOffset = 0
setTimeout(() => {
container.scrollTop = 0
})
container.dispatchEvent(event)
Can any one point me to an example of changing views with buttons for a carousel ?
I would like the option to swipe or click to change views.
Thanks
You've various ways to achieve it, you can either use setActiveItem:
carousel.setActiveItem(1); // Move to the 2nd carousel's item.
or apply next and previous method on your button handler to switch to the next and previous card of your carousel:
carousel.next();
carousel.previous();
Here is a demo: http://www.senchafiddle.com/#Ukg1N