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

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

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

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

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

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

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

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

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

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

相关推荐
我爱切图4 分钟前
echart 移动端进行双指缩放时,当放大到最大级别后,手指没有离开屏幕,图表还会自动移动问题修复
前端
optimistic_chen10 分钟前
【Vue入门】创建Vue工程环境和响应式函数
前端·javascript·vue.js·前端框架·html
南城书生19 分钟前
Android Handler 机制源码分析
前端
南城书生19 分钟前
Android 大图加载与 OOM 优化
前端
南城书生20 分钟前
RecyclerView 源码分析
前端
南城书生21 分钟前
LeakCanary 原理分析
前端
没想好d21 分钟前
通用管理后台组件库-13-页签组件
前端
xChive22 分钟前
ECharts-大屏开发复习记录与踩坑总结
前端·javascript·echarts
南城书生23 分钟前
Java HashMap 源码分析
前端
南城书生23 分钟前
Java 线程池(ThreadPoolExecutor)源码分析
前端