Scroll content inside Slide Box [FIXED]

@kalilmaciel wrote:

I finally got fixed a problem that other peoples here has faced. If I have a Slide Box, and inside this slide box I have some scrollable content (as a list or a vertical scroll), the handling of scroll and slide is so hard that makes dificult to use.

I resolved this by adding a limit to the scroll to work before activate the slide. The attribute limitslide is the limit to the slide left or right is inactive before be active. Follow this guide:

This is the view

<ion-slide-box  mainslidebox limitslide="100">
    <ion-slide>
    //Scrollable content
    </ion-slide>
    <ion-slide>
    //Scrollable content
    </ion-slide>
</ion-slide-box>

This is the controller's Javascript

            $scope.init = function () {
                //Disable slide of slidebox
                $timeout(function () {
                    $ionicSlideBoxDelegate.enableSlide(false);

                }, 100);

                $scope.destaque = mock.destaques;
            };

Create this directive

    //This takes care of the slidebox
    angular.directive('mainslidebox', function ($ionicGesture, $ionicSlideBoxDelegate) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                var limit = attrs.limitslide;
                $ionicGesture.on(
                        "dragleft",
                        function (ev) {
                            if (ev.gesture.deltaX.toFixed(0) < (limit * -1)) {
                                console.log('Esquerda');
                                $ionicSlideBoxDelegate.enableSlide(true);
                            }
                        },
                        elem
                        );

                $ionicGesture.on(
                        "dragright",
                        function (ev) {
                            if (ev.gesture.deltaX.toFixed(0) > (limit * 1)) {
                                console.log('Direita');
                                $ionicSlideBoxDelegate.enableSlide(true);
                            }
                        },
                        elem
                        );

                $ionicGesture.on(
                        "release",
                        function (ev) {
                            console.log('Release');
                            $ionicSlideBoxDelegate.enableSlide(false);
                        },
                        elem
                        );
            }
        };
    })

I hope this help other people with same problem. This could be added to the Ionic project (just a suggestion )

Posts: 1

Participants: 1

Read full topic