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

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

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

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

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

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

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

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

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

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

相关推荐
FL162386312913 分钟前
室内易燃物识别易燃评估室内易燃程度识别分割数据集labelme格式1015张85类别
java·服务器·前端
用户0595401744614 分钟前
把 AI 长期记忆去重测试从 20 分钟压到 40 秒,重复率从 18% 干到 1.5%
前端·css
kyriewen43 分钟前
我把 AI 写的并发请求控制器手写了一遍——3 个语义我当时根本讲不清
前端·javascript·面试
_codemonster1 小时前
Vue中的ref和reactive到底在干嘛
前端·javascript·vue.js
IT_陈寒1 小时前
为什么我的JavaScript闭包总是漏掉那个变量?
前端·人工智能·后端
两只羊ovo2 小时前
前端八股之 storage & this:两个最容易卡住的点,一次讲透
前端
用户921080262862 小时前
Bubble 打字机效果实践:从项目配置到源码实现
前端
张元清2 小时前
React useEventListener Hook:类型安全的 DOM 事件监听 (2026)
javascript·react.js
weixin_461408582 小时前
npm npx yarn
开发语言·前端·javascript