Ionic转盘调整$http调用的大小问题

Ionic carousel resize issue with $http call

本文关键字：问题 调用 http 调整 Ionic      更新时间：2023-09-26

我正在Ionic中使用一个插件来创建一个旋转木马(https://github.com/ksachdeva/angular-swiper)它有一个简单重复的演示。我使用$http将repeat替换为我自己的repeat，这造成了一个问题，因为加载图像的延迟会导致滑块在调整大小之前断裂。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（）未定义"。

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

我遇到了同样的问题。我首先注意到的一件事是，我的swiper.js版本（而不是angular swipper.js）没有updateSlidesSize（）函数。所以我找到了一个新版本的swipper.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);
});

我只在谷歌Chrome中进行了模拟测试，而不是在实际的移动设备上。

相关文章：