Question

我是使用离子框架的新手，我遇到了问题。我在模板中添加了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。有人能帮助我吗？

Answer 1

我在这里找到了解决方案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中定义它。

Answer 2

可能是因为你没有使用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
  });
});

我引用了this tutorial。

离子swiper不起作用

2 个答案: