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

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

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

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

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

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

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

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

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

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

相关推荐
喝拿铁写前端8 小时前
一套面向 Web、H5、小程序与 Flutter 的多端一致性技术方案
前端·架构
yaaakaaang9 小时前
(一)前端,如此简单!---下载Nginx
前端·nginx
牛奶9 小时前
为什么全国人民都能秒开同一个视频?
前端·http·cdn
KongHen029 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
数据潜水员9 小时前
三层统计最小力度的四种方法
javascript·vue.js
汪子熙9 小时前
TS2320 错误的本质、触发场景与在 Angular / RxJS 项目中的系统化应对
前端·javascript·angular.js
我命由我123459 小时前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Younglina9 小时前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen10 小时前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基10 小时前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript