您的位置:首页 > 产品设计 > UI/UE

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

2015-12-03 10:38 483 查看

解决方案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);
};

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: