解决方案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 查看本文章