ionic+swiper实现自动轮播在实现自动轮播的时候,请求回来的图片数据不能正常轮播,在每次轮播的时候总是会跳过第一张从第二张开始,针对该问题可以在控制器中注入$timeout,将实例化swiper对象放入$timeout定时器中解决。
html代码:
<div class="headerSlider">
<div id="headerSlider" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="item in slide">
<img alt="{{item.alt}}" ng-src="{{item.picture}}" ng-click="goToStore(item.shopid)">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
控制器中代码:
// 初始化头部滚动条swiper
function initHeaderSlide() {
$timeout(function(){
var headerSwiper = new Swiper('#headerSlider', {
slidesPerView: 1,
paginationClickable: true,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false,
loop: true,
pagination: '.swiper-pagination',
observer: true,
observeParents: true
});
},1000)
} |
|