当使用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); };
相关文章推荐
- ionic的ion-slide-box使用ng-repeat不显示
- 利用ngrepeat实现的日历加上ion-slide-box效果
- 在使用angularjs过程,ng-repeat中track by的作用
- ionic 中使用ion-slide-box
- ionic ion-slide-box网络加载图片,及时更新,无限循环
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
- 解决angularjs 使用 ng-repeat 循环输出时html元素无法解析的问题
- 设置了auto-play 的ion-slide-box中切换tab时,内置计时器失效导致不自动播放的解决办法
- ng-repeat的作用域问题
- ionic 图片轮播ion-slide-box问题
- 使用angular中ng-repeat , track by的用处
- ng-repeat 里 使用ng-show ng-hide出现闪动
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- angular使用ng-repeat时的传值
- angularjs 指令ng-repeat使用教程
- 使用ng-repeat 指令来创建下拉列表
- AngularJS使用 ng-repeat 中的 $index与替代方法
- angularjs中ng-repeat里面ng-model的使用
- AngularJs使用ng-repeat实现数据循环展示的效果
- AngularJS 使用ng-repeat报错