离子刷不工作答案

【问题标题】：Ionic swiper does not work离子刷不工作
【发布时间】：2016-03-16 16:11:09
【问题描述】：

我是使用 ionic 框架的新手，但遇到了跟随问题。我在模板中添加了 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

【解决方案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 中定义它。

【讨论】：

【解决方案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。

【讨论】：