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

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

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

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

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

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

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

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

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

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

相关推荐
Amumu121386 小时前
Vue核心(三)
前端·javascript·vue.js
CoCo的编程之路6 小时前
2026 前端效能革命:如何利用智能助手实现“光速”页面构建?深度横评
前端·人工智能·ai编程·comate·智能编程助手·文心快码baiducomate
RFCEO7 小时前
HTML编程 课程五、:HTML5 新增语义化标签
前端·html·html5·跨平台·语义化标签·可生成安卓/ios·html最新版本
Irene19917 小时前
JavaScript中,为什么需要手动清理事件
javascript·手动清理事件监听器
摘星编程7 小时前
OpenHarmony环境下React Native:Zustand持久化存储
javascript·react native·react.js
2501_944521597 小时前
Flutter for OpenHarmony 微动漫App实战:图片加载实现
android·开发语言·前端·javascript·flutter·php
摘星编程7 小时前
在OpenHarmony上用React Native:Recoil选择器异步数据
javascript·react native·react.js
雨中深巷的油纸伞7 小时前
vue 项目部署到iis后 浏览器刷新404
前端·javascript·vue.js
谢尔登8 小时前
从源码视角来看Pinia!
前端·javascript·vue.js
梦6508 小时前
JavaScript 循环
开发语言·javascript·ecmascript