carousel组件bug

ipan

carousel组件设置auto=true时候会自动滚动，有时候需要对carousel组件做刷新数据；需要先remove后add操作；测试多次，发现在滚动的瞬间进行remove会造成该组件无法正常显示！

将auto=false，在加载Data前执行removeAll再add数据，发现无法正常显示；必须保证第一张不能被删除才行；
将auto=true，在加载Data前执行removeAll再add数据，发现可以正常显示；可以删除第一张；

liangyongfei

你是3.7吗？？
做一个demo发来，本地重现看下，最新版本还有这个问题没？？  加载data前去操作的吗？？  add的数据是哪儿来的？

remove 的时候，注意先删除最大索引的值

ipan

V3.6的，我是1 使用remove试过有问题； 2 试过直接jquery删除dom有问题； 3 使用removeAll有问题；现在不确定是不是移动的时候触发的remove有问题，反正是不稳定的，时而正常时而不正常；

对于下面的测试，可以在taobao里面测试
将auto=false，在加载Data前执行removeAll再add数据，发现无法正常显示；必须保证第一张不能被删除才行；
将auto=true，在加载Data前执行removeAll再add数据，发现可以正常显示；可以删除第一张；
1 把modelModelConstruct里面代码注释掉；
2 imgDataCustomRefresh方法里面，先做carousel.removeAll()再执行add；

ipan

不管怎么测试，发现dom结构都是正确的，就是组件不显示；好像是被删除后造成了组件显示不出来；

liangyongfei

ipan 发表于 2017-12-20 16:42
V3.6的，我是1 使用remove试过有问题； 2 试过直接jquery删除dom有问题； 3 使用removeAll有问题；现在不确 ...

你好楼主，您反馈的这个现象通过验证是产品缺陷，我们已提交到产品组(内部编号：2017122000001)，感谢楼主的支持与配合。

liangyongfei

ipan 发表于 2017-12-20 16:43
不管怎么测试，发现dom结构都是正确的，就是组件不显示；好像是被删除后造成了组件显示不出来； ...

我知道了，因为auto=false 所以不会自动切换第一页的！  添加完数据以后，你代码调用一下
carousel.to(0);

默认切换到第一个页签上就可以了！

ipan

是的，你说的没错！auto=false的时候，刷新页面执行了removeAll后再进行add，最后需要执行carousel.to(0);这是没有问题的！

但是，auto=true的时候，执行上面操作，有而还出现无法正常显示的现象！

liangyongfei

ipan 发表于 2017-12-21 10:16
是的，你说的没错！auto=false的时候，刷新页面执行了removeAll后再进行add，最后需要执行carousel.to(0); ...

我这里都正常的啊！
auto=true的时候，执行了removeAll后再进行add  最后也执行  carousel.to(0);  可以吗？？

carbinechun

liangyongfei 发表于 2017-12-21 10:30
我这里都正常的啊！
auto=true的时候，执行了removeAll后再进行add  最后也执行  carousel.to(0);  可以 ...

时至今日，问题依旧存在啊。最关键的是时有时无，具体的体现是内层content的active没被触发，外层的height没被撑开，高度为0，所以直观的感觉就是不显示了，实际上问题的关键应该在于数据重加载重新添加轮播项后会遇到所有轮播项都没有active这项class属性的情况。不知道是在哪个环节给卡了一下。调试的时候发现手动加这个class没用，必须要设置auto=true或者调用carousel.next或者to(n)才能生效

carbinechun

liangyongfei 发表于 2017-12-21 10:30
我这里都正常的啊！
auto=true的时候，执行了removeAll后再进行add  最后也执行  carousel.to(0);  可以 ...

让这个问题折磨了N天。。。终于琢磨出个不完美的解决方法。说是不完美是因为更新轮播图片的时候能看到加载动画（由删除到新增的过渡画面），不敢多折腾了，唯恐再遇到新的问题。大体说下我的处理办法：
我是在index页面作为主页显示（包含多个content），上方有轮播组件。涉及登陆功能，所以加了windowDialog先行登陆。每次登陆后会根据用户所属不同组织加载不同的轮播图片，有的带有点击查看明细内容事件。
出现的问题就是重新登陆后图片可能出现不显示的问题（实际问题是carousel通过add添加图片后执行next()或者to(n)无效，轮播图片没获取active这一class属性，造成carousel的高度没有被图片的高度撑开）。至于原因，不能完全明确，只能是大体估测一下，是carousel的自动轮播功能与页面切换存在冲突。我的退出登陆是在其他content里的，本地运行查看元素的时候能看到，一旦离开了carousel所在的content，图片就不再有轮播效果，active这一class不会再按时随图片进行轮换。感觉像是计时器的一个通病（运行计时器的页面如果最小化或者切换到别的页面计时器就暂停状态了）。
我的动态更新轮播的基本过程——用户登陆，成功后在windowDialog的onrecieve事件里接收轮播data，然后循环data添加图片。退出用户时调用carousel.removeAll()清除轮播图。登陆新用户后和首次登陆同样处理。
调试了很久，遇到各种问题。拣一点重要的说一下吧。更新轮播基本是两种思路，一种是退出时carousel删除图片，登陆后add新图片；一种是退出时不删除，根据新登陆后的图片数量来选择覆盖原图片信息还是add新图片。后面这种如果图片上不带点击跳转功能的话，那就算是解决问题了。但如果需要点击功能，那替换后的事件包括组件id之类的信息都是替换前的，这算是缓存问题还是类似的情况吧，反正是点击事件有问题。所以只能用第一种思路。
废话半天，主要是给看的朋友脑子里有的整体的思路，知道问题出在哪。下面是我自己用的解决办法。期间调试了很久的carousel自带的demo，发现不管是删除还是添加还是下一页还是跳到哪页都完全好用。然后就想到了js代码执行顺序的问题。在退出登陆的函数里如果做了轮播图的删除，那么在登陆函数处理时轮播图的active的关键class就获取不到，自动轮播功能失效。所以退出时不再做删除操作。而是在登陆时做处理。登陆时把需要的data放好。其他逻辑都处理完后，最后做carousel的动态加载内容。这里有个重中之重，我把carousel重新加载的处理放到了主功能页所在content的onActive事件中去了，相当于把登陆操作和轮播加载给分离开了。动态加载处理顺序就是先删除全部，然后新加，在每次add后执行一次to(0)操作（这是在data的each循环内部的操作，不要放到外部）。到了这时候，就回到了我开始讲到的不完美的地方了。因为代码逻辑的顺序是先登陆完成了，再进行content的跳转，解决onActive事件后才做carousel的重新加载图片操作，所以出现了图片没有了再加载出来的动画效果。
本身就是二把刀，很多问题可能讲不到重点上，有类似问题的朋友将就着参考一下吧