ionic第一坑——ion-slide-box坑（ion-slide分两页的坑）

最新推荐文章于 2021-04-03 22:00:07 发布

weixin_30856725

最新推荐文章于 2021-04-03 22:00:07 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/provencefeng/p/6179267.html

本文探讨了Ionic框架中滑块组件的一个特殊处理逻辑：当仅有两张轮播图时，框架会自动复制这两张图片以实现连续过渡效果。文中通过调试分析了这一现象背后的原因，并引用了Ionic.js中的相关代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 ionic.views.Slider = ionic.views.View.inherit({
 2   initialize: function (options) {
 3     .
 4     .
 5     .
 6     function setup() {
 7       .
 8       .
 9       .
10       // set continuous to false if only one slide
11       if (slides.length < 2) options.continuous = false;
12 
13       //special case if two slides
14       if (browser.transitions && options.continuous && slides.length < 3) {
15         element.appendChild(slides[0].cloneNode(true));
16         element.appendChild(element.children[1].cloneNode(true));
17         slides = element.children;
18       }
19       .
20       .
21       .
22     }
23     .
24     .
25     .
26   }
27 });

　　交流群里一位仁兄问了这么个问题，做图片轮播的时候，如果是两张图片情况下，会出来四张（两张重复），觉得好神奇，就试了试，果然如此。

　　于是乎打断点调试了下，就发现以上代码。这是ionic.js里面的代码片段，是slider的定义。注意这句注释：//special case if two slides。虽不知道为何如此设计，但是这就是原因所在了，在slides.length=2的时候就进入此判断下，于是就复制了两个出来，两个轮播图就变成了四个。

　　由于学时尚短，不敢乱动框架，现只记在此处，未有解决方案。

转载于:https://www.cnblogs.com/provencefeng/p/6179267.html