`
是我不够爱
  • 浏览: 12041 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论

当使用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);
    };

 

 

分享到:
评论

相关推荐

    汇编综合试验b

    - **实现多重循环和子程序**:通过设计合理的程序结构,使用循环结构和子程序来提高代码复用性和可读性。 - **掌握汇泡排序算法**:利用冒泡排序算法对学生成绩进行排序,并同步调整学号位置。 #### 设备与环境 - *...

    PHP语言基础知识详解及常见功能应用.docx

    本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。

    公司金融课程期末考试题目

    公司金融整理的word文档

    适用于 Python 应用程序的 Prometheus 检测库.zip

    Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸

    DFC力控系统维护及使用

    DFC力控系统维护及使用

    Spring Data的书籍项目,含多数据库相关内容.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    2019-2023GESP,CSP,NOIP真题.zip

    2019-2023GESP,CSP,NOIP真题.zip

    基于 Gin + Element 实现的春联生成平台

    博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502

    zetero7实测可用插件

    包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898

    简单的 WSN 动画制作器 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    毕业设计&课设_仿知乎社区问答类 App 项目:吉林大学毕业设计,含代码、截图及相关说明.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    python技巧学习.zip

    python技巧学习.zip

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码

    life-expectancy-table.json

    echarts 折线图数据源文件

    此扩展现在由 Microsoft fork 维护 .zip

    Visual Studio Code 的 Python 扩展Visual Studio Code 扩展对Python 语言提供了丰富的支持(针对所有积极支持的 Python 版本),为扩展提供了访问点,以无缝集成并提供对 IntelliSense(Pylance)、调试(Python 调试器)、格式化、linting、代码导航、重构、变量资源管理器、测试资源管理器等的支持!支持vscode.devPython 扩展在vscode.dev (包括github.dev )上运行时确实提供了一些支持。这包括编辑器中打开文件的部分 IntelliSense。已安装的扩展Python 扩展将默认自动安装以下扩展,以在 VS Code 中提供最佳的 Python 开发体验Pylance - 提供高性能 Python 语言支持Python 调试器- 使用 debugpy 提供无缝调试体验这些扩展是可选依赖项,这意味着如果无法安装,Python 扩展仍将保持完全功能。可以禁用或卸载这些扩展中的任何一个或全部,但会牺牲一些功能。通过市场安装的扩展受市场使用条款的约束。可

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    5 总体设计.pptx

    5 总体设计.pptx

    用于执行 RPA 的 Python 包.zip

    Python 版 RPAv1.50  • 使用案例•  API  参考 • 关于 和制作人员 • 试用云 •  PyCon 视频 •  Telegram 聊天 • 中文 •  हिन्दी  • 西班牙语 • 法语 •  বাংলা  •  Русский  • 葡萄牙语 • 印尼语 • 德语 • 更多..要为 RPA(机器人流程自动化)安装此 Python 包 -pip install rpa要在 Jupyter 笔记本、Python 脚本或交互式 shell 中使用它 -import rpa as r有关操作系统和可选可视化自动化模式的说明 -️‍ Windows -如果视觉自动化有故障,请尝试将显示缩放级别设置为推荐的 % 或 100% macOS -由于安全性更加严格,请手动安装 PHP并查看PhantomJS和Java 弹出窗口的解决方案 Linux -视觉自动化模式需要在 Linux 上进行特殊设置,请参阅如何安装 OpenCV 和 Tesseract Raspberry Pi - 使用此设置指南在 Raspberry Pies(低成本自

    原生js识别手机端或电脑端访问代码.zip

    原生js识别手机端或电脑端访问代码.zip

    极速浏览器(超快速运行)

    浏览器

Global site tag (gtag.js) - Google Analytics