Ионный свайпер не работает

Я новичок в использовании ionic framework и столкнулся с следующей проблемой. Я добавил swiper в свой шаблон.

<ion-content class="padding">
    <div ng-controller="CarouselController">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" ng-repeat="i in new_issues"><img ng-src="{{ i.image }}"></div>
            </div>
        </div>
    </div>
</ion-content>

А затем определите его внутри контроллера.

.controller('CarouselController', function($scope) {

    var mySwiper = new Swiper('.swiper-container', {
        speed: 400,
        spaceBetween: 100,
        slidesPerView: 3,
        centeredSlides: true
    }); 

})

И этот ползунок не работает сразу после загрузки страницы. Чтобы заставить его работать, мне нужно нажать на верхнюю кнопку, просто покажите мне какое-нибудь всплывающее окно, и только после закрытия этого окна мой ползунок начнет работать. Здесь вы можете увидеть, как это работает http://mobile.pressa.ru. Может ли кто-нибудь помочь мне?


cordova ionic-framework swiper
person zdimon77    schedule 16.03.2016    source источник
comment
Также, когда я изменяю размер окна браузера, карусель начинает работать хорошо.   -  person zdimon77    schedule 17.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел решение здесь http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/ Я создал такую ​​директиву

.directive('imageonload', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
$rootScope.swiper.updateSlidesSize();
});
}
};
})

и добавил его в тег img

<img imageonload="" ng-src="{{ i.image }}">

Предварительно определив его в моем файле $rootScope.

person zdimon77    schedule 17.03.2016

arrow_upward
0
arrow_downward

Это может быть связано с тем, что вы не используете swiper в качестве директивы и, следовательно, не интегрируете привязку дайджеста $scope (как подсказывает @zdimon77).

Попробуйте это (при условии, что вы используете Ionic 1.2):

HTML

<ion-slides options="sliderOptions" slider="data.slider">
  <ion-slide-page ng-repeat="(i, issue) in new_issues">
    <img ng-src="{{ issue.image }}" />
  </ion-slide-page>
</ion-slides>

и в вашем контроллере AngularJS:

.controller('CarouselController', function($scope) {
  $scope.sliderOptions = {
    speed: 400,
    spaceBetween: 100,
    slidesPerView: 3,
    centeredSlides: true
  };

  $scope.data = {};

  $scope.$watch('data.slider',function(slider){
      console.log('My slider object is ', slider);
      // Your custom logic here
  });
});

Я ссылался на это руководство.

person irbanana    schedule 20.03.2016