Hi, i’m trying to create an app with the functionality of the native tabs of android (similar to the facebook app), and i need help getting rid of the dragging effect when the active slide is either the first or the last. Can somebody point me to the right method to achieve this?
Thanks!
Sure, you can do this with $ionicSlideBoxDelegate.enableSlide(false);
This example will disable dragging on the second slide
$scope.slideChanged = function(slide) {
$scope.currentSlide = $ionicSlideBoxDelegate.currentIndex();
if ( $scope.currentSlide == 1) {
console.log($scope.currentSlide);
$ionicSlideBoxDelegate.enableSlide(false);
}
};Thank you!! It’s a starting point… but what I meant was to disable the dragging in one direction only (either left or right). Can this be achieved? Or maybe you can point me to the documentation page I need? haven’t found anything on enableSlide
Without digging into the source code, I can’t think of anything off the top of my head. I can open a issue to add this as a feature request. Are you just trying to disable the bounce?
Yes! my goal here is to disable the bouncing effect when i’m in the first slide (that is, disable the bouncing effect when dragging from the left) or the last slide (disable the bouncing effect when dragging from the right).
Alright, I just opened a issue for this
1 Like
I will go one step further: there is a use case for limiting swiping to one direction, i.e, disabling the swiping of a direction. Suppose you have a walkthrough or a test where the user answers, goes to the next slide but you don’t want them to be able to swipe back. Something I actually need to do and can’t seem to find where I can change this in the source.
Hey, I wanted to something similar so I disabled the slider on the init state:
$ionicSlideBoxDelegate.$getByHandle('checkout-box').enableSlide(0);
Then I added swipe controls to the box:
on-swipe-left="swipeLeft()"
on-swipe-right="swipeRight()"
I check to see if my logic is valid on the swipeLeft function:
if($scope.checkoutBox.currentIndex() < $scope.completedStep){
$ionicSlideBoxDelegate.$getByHandle('checkout-box').next();
}
And to go back I call swipeRight():
$scope.swipeRight = function(){
$ionicSlideBoxDelegate.$getByHandle('checkout-box').previous();
}I have implemented this code but now I cant verticall scroll! please help
Duovili, because we’ve disabled slide with enableSlide(0);
I would imagine you’d need to do something like:
HTML:
on-swipe-up=“onSwipeUp()”
and a corrseponding JS function.
However, I don’t know that the slider box is designed to do vertical scrolling at all: Ion-slide-box slide vertically?
but shouldnt teh scroll of the containing view handle the overflow from the slide box. I dont need the slide box to vertically drag, I just want to disable drag but scroll content. I think this is a bug.
I’m not sure what you are trying to accomplish.
Did you want to disable the sliding past the edges of the parent container?
if so, just use
has-bounce=false
or if you are trying to make your slide box slide to a certain position:
$ionicScrollDelegate.$getByHandle('pip-nav').scrollTo(distance, 0, true);
where distance is the pixel distance you want the scroll box to slide.
NO SLIDE I just want to use the slide box like tabbed contain on a website. but I dont want the user to be able to drag it but when I drag it I cant scroll vertically anymore so if the content in the slide box is greater than the screen then it wont slide. I think the problem is I have to+6 re init the box as its dynamic data.
maybe just use ion-content then. Why use a slide box if you don’t want it to slide?
It’s possible people use slide box for navigation in order to get page animation without using nav. For example, in a modal you could have slide box to simulate a settings menu system.
Its because I wasnt updating the slidebox after the dynamic data had gone in that my scroll was breaking I have since fixed this thank you
For anyone else who wants to disable user-initiated sliding for slide box, disable-scroll worked for me:
<ion-slide-box disable-scroll="true"> ... </ion-slide-box>
And to allow normal vertical scrolling in a slide box in a modal, I used this setup:
<ion-modal-view>
<ion-header-bar> ... </ion-header-bar>
<ion-content class="has-header">
<ion-slide-box disable-scroll="true">
<ion-slide> ... </ion-slide> /* no additional <ion-content> containers in here */
<ion-slide> ... </ion-slide> /* no additional <ion-content> containers in here */
<ion-slide> ... </ion-slide> /* no additional <ion-content> containers in here */
</ion-slide-box>
</ion-content>
</ion-modal-view>
HOWEVER, vertical scrolling applies to the entire slide box. So if you scroll down a list on one slide and then navigate to another slide, you’re still at the same scroll position as you were on the previous slide. At first, I simply did a “ScrollToTop” but this was not a good solution for navigating backwards - you want to go back to a screen that is just the way you left it.
To solve, and to give me a very functional navigation system in a modal, I used the $ionicScrollDelegate methods “getScrollPosition” and “scrollTo” to make sure the scroll position of each view (slide) was preserved. This way, navigating back and forth is natural and intuitive (you can’t see the scrolling and no flicker). Works well on iPhone 6, but I have not tested on other devices yet.