ionic+swiper实现自动轮播在实现自动轮播的时候,请求回来的图片数据不能正常轮播,在每次轮播的时候总是会跳过第一张从第二张开始,针对该问题可以在控制器中注入$timeout,将实例化swiper对象放入$timeout定时器中解决。
html
<div id="index-banner" ng-if="ads">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="ad in ads">
![]({{ad.advertisingPicture}})
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
控制器中代码:
$scope.indexBanner = function () {
$timeout(function() {
var swiper = new Swiper('#index-banner .swiper-container', {
pagination: '#index-banner .swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
initialSlide: 0,
loop: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
autoplay: $scope.playSpeed,
loopAdditionalSlides: 2,
autoplayDisableOnInteraction: false,
});
})
}