老师轮播图的实现，老师能增加些备注，或者多说明下思路，我觉得这里很复杂

Question

老师轮播图的实现，老师能增加些备注，或者多说明下思路，我觉得这里很复杂

Answer 1

one_pieces 2023-02-16 13:28:05

同学你好，这一节的轮播图确实是逻辑比较复杂的组件，在开始时老师也说过。整体的实现分两个部分，第一个是轮播效果，包括轮播卡片自动的滚动以及循环滚动，这部分的原理其实跟 ScrollBar 组件是类似的，使用 translate + 定时执行实现自动滚动，使用偏移首尾卡片的位置来实现循环滚动。第二部分是触碰滚动，这部分原理是用 touch 事件 + translate 来计算用户触碰距离，然后偏移卡片的位置。这在小节开头的讲解部分有说明哈～

不过这小节的内容其实比较多，因为还涉及组件实例，组件通信等内容，同学消化起来可能有一些难度。整体的思路就是上面这些，同学觉得有困惑，应该是对部分的代码不理解为什么这么写，同学可以直接提对哪部分内容有什么问题哈～

• 提问者 unbreakable_全栈 #1

  非常感谢！

• one_pieces 回复 提问者 unbreakable_全栈 #2

  不客气～