当使用ng-repeat时ion-slide-box的does-coutinue失去作用

解决方案1:在slide-change事件里判断当前的index,  但是这种方式的循环看起来会很别扭

$scope.slideHasChanged = function(index) {
    $scope.slideIndex = index;
    if ( ($ionicSlideBoxDelegate.count() -1 ) == index ) {
        $timeout(function(){
            $ionicSlideBoxDelegate.slide(0);
        },2000);
    }
};

 

解决方案2:修改ionic.bundle.js

将这段代码(ionic版本:1.1.1,代码位置:#8120)

if (slides.length<2) options.continuous=false;

 替换成如下代码

if (slides.length<2) {
     options.initialContinuous=options.continuous;
     options.continuous=false;
} elseif (options.initialContinuous) {
     //if original  continuous is true, recover it
     options.continuous=options.initialContinuous;
}

 原理: 当使用ng-repeat的时候ionic.views.Slider的初始化时slides.length为0所以将optins.continuous的值设置为false,当我们获取到数据之后使用IonSlideBoxDelegate.update()之后slides.length就变成了我们数据的长度,但是update方法只将setup方法重新执行了一遍,而options.continuous的定义是在setup方法之上的所以它将第一次setup的false保存了下来,而第二次setup时slides.length不小于2但是没有对options.continuous重新设置,所以options.continuous的值是false则循环不生效。

而替换之后的代码,将options.continuous的设置保存到了变量options.initialContinuous中,这样在第二次setup的时候就可以判断初始化的continuous的值是不是true如果是true则将options.initialContinuous重新赋值给options.continuous。

附ionic.bundle.js中的ionic.views.Slider初始化参数及setup、update源码

var container = options.el;

    // quit if no root element
    if (!container) return;
    var element = container.children[0];
    var slides, slidePos, width, length;
    options = options || {};
    var index = parseInt(options.startSlide, 10) || 0;
    var speed = options.speed || 300;
    options.continuous = options.continuous !== undefined ? options.continuous : true;

    function setup() {

      // do not setup if the container has no width
      if (!container.offsetWidth) {
        return;
      }

      // cache slides
      slides = element.children;
      length = slides.length;

      // set continuous to false if only one slide
       // if (slides.length < 2) options.continuous = false;
      if (slides.length < 2) {
        options.initialContinuous = options.continuous;
        options.continuous = false;
      } else if (options.initialContinuous) {
        //if original  continuous is true, recover it
        options.continuous = options.initialContinuous;
      }

      //special case if two slides
      if (browser.transitions && options.continuous && slides.length < 3) {
        element.appendChild(slides[0].cloneNode(true));
        element.appendChild(element.children[1].cloneNode(true));
        slides = element.children;
      }

      // create an array to store current positions of each slide
      slidePos = new Array(slides.length);

      // determine width of each slide
      width = container.offsetWidth || container.getBoundingClientRect().width;

      element.style.width = (slides.length * width) + 'px';

      // stack elements
      var pos = slides.length;
      while(pos--) {

        var slide = slides[pos];

        slide.style.width = width + 'px';
        slide.setAttribute('data-index', pos);

        if (browser.transitions) {
          slide.style.left = (pos * -width) + 'px';
          move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
        }

      }

      // reposition elements before and after index
      if (options.continuous && browser.transitions) {
        move(circle(index - 1), -width, 0);
        move(circle(index + 1), width, 0);
      }

      if (!browser.transitions) element.style.left = (index * -width) + 'px';

      container.style.visibility = 'visible';

      options.slidesChanged && options.slidesChanged();
    }

    this.update = function() {
        setTimeout(setup);
    };
扫描二维码关注公众号,回复: 348664 查看本文章

猜你喜欢

转载自346454763.iteye.com/blog/2261321