黑马程序员技术交流社区

标题: ionic+swiper实现自动轮播的问题 [打印本页]

---

作者: 13414309233F    时间: 2017-6-7 16:29
标题: ionic+swiper实现自动轮播的问题
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)
    }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2