Question

我在Ionic中使用插件来创建一个旋转木马（https://github.com/ksachdeva/angular-swiper），它有一个带有简单重复的演示。我使用$ http替换了我自己的重复，它产生了一个问题，即加载图像的延迟会导致滑块断开，直到调整大小。 HTML看起来像这样：

<ks-swiper-container autoplay="500" initial-slide="1" speed="5000" loop="false" show-nav-buttons="false" slides-per-view="2" space-between="20" pagination-clickable="false" override-parameters="{effect: 'coverflow',coverflow: {rotate: 0,stretch: 0,depth: 100,modifier: 1,centeredSlides: true,slideShadows : false}}" on-ready="onReadySwiper(swiper)">

            <ks-swiper-slide class="swiper-slide" ng-repeat="feature in featured track by feature.id">
                <img imageonload="" ng-src="{{feature.thumbnail_images.thumbnail.url}}" width="100%">
                <h6 ng-bind-html="feature.title"></h6>
            </ks-swiper-slide>

           <ks-swiper-slide class="swiper-slide">
            <img src="img/more.png" style="transform: rotate(180deg);" width="100%">
            <h6>Read More</h6>
            </ks-swiper-slide>

        </ks-swiper-container>

我正在从我的工厂调用我的图像：

.controller('SwipeCtrl', function($scope, Featured) {

    $scope.swiper = {};
    $scope.onReadySwiper = function (swiper) {

        swiper.on('slideChangeStart', function () {
        });

        swiper.on('onSlideChangeEnd', function () {
        });   

    };




  $scope.featured = [];
  Featured.all().then(function (response,swiper){

      $scope.featured = response;
      for (var i =0; i < $scope.featured.length; i++) {
            $scope.featured[i].date = new Date($scope.featured[i].date);

        }
  }, 

  function (err) {
     if(window.localStorage.getItem("featured") !== undefined) {

      }
    }
  );
})

我尝试添加$ timeout，但没有帮助。我找到了建立指令的建议：

.directive('imageonload', function ($rootScope, $timeout) {
    return {
    restrict: 'A',
        link: function(scope, element, attrs) {

            element.bind('load', function() {
                $timeout(function(){
                    $rootScope.swiper.updateSlidesSize();
                });
            });


        }
    };
});

但我一直得到“updateSlidesSize（）未定义”。

真的不太确定如何解决这个问题......

Answer 1

我有同样的问题。我注意到的第一件事是我的swiper.js版本（不是angular-swiper.js）没有函数updateSlidesSize（）。所以我找到了更新版本的swiper.js，它包含了这个功能。

所以应该照顾未定义的。现在，把它们放在一起，这就是我所做的：

//My HTML
<ks-swiper-container initial-slide="1"  loop="false" show-nav-buttons="false" slides-per-view="3" space-between="5" pagination-clickable="false" on-ready="onReadySwiper(swiper)">...</ks-swiper-container>

//My controller
$scope.swiper = {}; //initialize
$scope.onReadySwiper = function (swiper)
{
  $scope.swiper = swiper; //update when the swiper is ready
};
$scope.myData=[1,2,3,4,5];
$http.jsonp(myurl+'&callback=JSON_CALLBACK').success(function(data)
{
   $scope.myData=data; //e.g.: [6,7,8]
   $timeout(function() //give the data a moment to propagate
   {
     $scope.swiper.updateSlidesSize(); //now run the sizing update - can also use just .update()
     $scope.swiper.slideTo(0); //show the slider from the beginning
   }, 300);
});

我只在Google Chrome中使用仿真进行了测试，而不是在实际的移动设备上进行测试。

Ionic carousel通过$ http调用调整问题

1 个答案: