batsing
batsing
  • 发布:2015-09-08 15:59
  • 更新:2015-09-08 17:40
  • 阅读:5680

MUI滑动不灵敏,轮播不流畅,DOM结构太冗余

分类:MUI

1、轮播时要滑动的距离太远,在HelloMUI启动时的那个展示DEMO更为明显,要滑动接近半个屏幕才算跳转。
2、图片切换过程比较卡,有种一跳一跳的感觉。
3、DOM结构太冗余,最外一层.mui-slider,然后还有一层.mui-slider-group才到.mui-slider-item。其实应该两层就足够了,最外层.mui-slider,里面层甚至可以不需要class。
4、支持循环时需要额外添加两个item,这个就更不科学了,在网上找的轮播图模板几乎没有一个是要这么麻烦的,而且循环几乎是必然应用场景了。
可以说MUI里面有不少地方都是过渡设计的,过于复杂的DOM结构,过于多层的标签嵌套甚至过多的class,都会造成执行效率的下降,影响体验。

最后我发一个懒人之家的其中轮播图给大家参考一下:演示地址
大家也可以参考各大电商网站手机版的商品轮播展示图

2015-09-08 15:59 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

1.轮播的手势切换是分两种,
a.drag拖拽,手指按住不放拖拽,此时需要超过一半才会切换
b.swipe滑动,手指快速左右滑动,此时只需要快速滑动一下即可切换
2.切换过程跳动,不同手机,不同版本的系统可能有差异,性能问题会持续优化
3.DOM冗余,不同实现对DOM结构要求不同
我们的实现方案是使用css3 transform来实现,加上indicator等内容,三层已是较优方案,
仔细看你发的链接的示例和其他电商示例,几乎没有两层结构实现的
4.循环需要手动额外添加两个item,最初是考虑用户自己统一生成html比我们再次js生成要性能好点,所以没有提供内置的动态生成,后续版本会考虑动态生成循环元素

部分冗余设计是因为要考虑各种情况,如果是单为一种情况设计,那适用场景太少,比如为什么要设计一些class,那是因为很多情况需要自己自定义结构或者样式来实现个性化,几乎没有哪个框架会大量用标签设计样式,那样的话,dom结构将限制的更严格。

  • batsing (作者)

    我建议轮播手势只用drag拖拽就好了,swipe滑动并不是那么好用(包括zepto的那个swipe也是不那么顺畅,之前做电商项目的时候被boss吐槽了好一阵)。而drag和swipe这两种事件并不是有很大的区分阈值,同时监听两个事件可能也是造成比较卡的重要原因之一。

    我看了其它的轮播图,基本是drag拖拽一开始就会自动拖移5%左右,拖到超过约15%则切换。

    最好参考手册里的样式是下面中部有那个点点点的轮播点,这个是最常用的样式,要简单使用的人直接复制粘贴就好了,不用再找HelloMUI的源码去弄。

    2015-09-08 22:49

  • DCloud_UNI_FXY

    drag和swipe的实际用途有很大区分的。drag是要跟手操作的,比如drag的时候要时刻跟着动,举例:图片轮播,可拖拽选项卡,可拖拽侧滑菜单。swipe则是快速滑动切换。

    至于轮播拖拽到某个阀值就切换,后续版本会开放一个阀值配置,允许自定义该阀值

    2015-09-08 23:27

  • gadget2k

    回复 DCloud_UNI_FXY:阈值是否已开放?最近也被吐槽了。感觉至少改成1/3屏幕比较好。一般屏幕多数人的感觉都是拖不动。

    2015-11-16 14:48

该问题目前已经被锁定, 无法添加新回复