likes
comments
collection
share

SEMI DESIGN 源码学习(六)轮播图

作者站长头像
站长
· 阅读数 86

轮播图代码位于 packages/semi-ui/carousel/index.tsx,代码量不多。

SEMI DESIGN 源码学习(六)轮播图

核心同样是这个 foundation 属性,类型为 CarouselFoundation

SEMI DESIGN 源码学习(六)轮播图

CarouselFoundation 封装了轮播图的操作方法,通过传入的 adapter,管理轮播图组件的 state

SEMI DESIGN 源码学习(六)轮播图

adapter 目的是操作组件的 state 属性。

SEMI DESIGN 源码学习(六)轮播图

组件暴露的方法实际上调用的是 foundation 的方法。

SEMI DESIGN 源码学习(六)轮播图

renderChildren 方法渲染传给轮播图组件的子元素。

SEMI DESIGN 源码学习(六)轮播图

renderIndicator, renderArrow 分别渲染指示器和切换箭头。

最后 render 方法返回一个 div 容器,包裹整个组件。

SEMI DESIGN 源码学习(六)轮播图

本文完,下期详细解释这个 foundation 模式。

转载自:https://juejin.cn/post/7285290243298295860
评论
请登录