A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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)
    }

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马