背景
重点
如何位移 ? Position or Translate
鉴于走马灯中涉及大量的元素位移,transform显然是更好的选择,因为position会导致大量的回流重排,而 transform 不会,因为它是作为合成图层发送到 GPU 上,由显卡执行的渲染。
如何正确判断滑动方向
常规情况,我们会根据touchStart和touchMove时的pageX来判断滑动方向,但实际上是不准确的。假设我们向左滑动100px,又开始向右滑动,这时依然会被判定为左滑。因此touchMove.pageX不应该是和touchStart.pageX比较,而是和上一次移动后的位置preTouchMove.pageX比较,因为我们需要在每次移动之后将当前pageX存下来。
如何无缝循环
目前主流的做法,是在头尾各插入一张图片,即[1,2,3]=> [3',1,2,3,1'], 这样滑动时视觉上就已经满足要求,但当我在3' 处继续右滑时,如何回到 1呢?
当然需要做特殊处理,即当当前滑动到3'时,我需要让位置重新定位到3, 且要将transition 设为0,就能让用户感知不到这次重定位。滑动到1'时同理重新定位到1