CODEWITHSUNDEEP
angularjsionic-framework
Simran Kaur
Simran Kaur

Reputation: 1101

pull down to change slides in ionic

I have been seeing pull down to refresh in ionic. However, I wanted to implement something like changing slides with a slide up or slide down effect using pull down gesture.

Is it possible to customize ion refresher that way or is it strictly meant to refresh?

Can I call a function that would set an active slide on inside of ion refresher for on-refresh?

I am quite direction less about it as well. Can I please get some directions on customizing it that way?

I don't think I would like to use slide down gesture here as it would end up changing slide on slide down anywhere on the screen. I would like it happening from an icon on top of the screen instead, much like an ion refresher.

Upvotes: 1

Views: 326

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

ion-refresher is just a directive which gives you pull-down effect, on its on-refresh you have to call your own function, so you can do anything inside in that function. As you are saying you want to set a any slide to active, you just do it this way

<ion-refresher
    pulling-text="Pull to change slide..."
    on-refresh="changeSlide()">
</ion-refresher>

And in your controller:

$scope.changeSlide = function() {
    $ionicSlideBoxDelegate.slide(slide-number);
    $scope.$broadcast('scroll.refreshComplete');
};

NOTE:

  1. Dont forget to boradcast scroll.refreshComplete event after your action is done, because that gives signal to spinner of pull-down to stop.
  2. My suggestion is not use this for purpose you mentioned, because as directive name (ion-refresher) depicts, this effect is meant to give user feel of refreshing data of page.If ionic named it this way, there must be a good reason for that.

Upvotes: 1

Related Questions