跨 React 与微信小程序的滚动容器组件。
npm install @srcube-ui/scrollbox跨 React 与微信小程序的滚动容器组件。
- @srcube-ui/scrollbox / @srcube-ui/scrollbox/style:基础样式与类型定义
- @srcube-ui/scrollbox/react:React 组件(Scrollbox)
- @srcube-ui/scrollbox/mini:微信小程序组件(s-scrollbox)
``tsx
import { Scrollbox } from '@srcube-ui/scrollbox/react';
const items = Array.from({ length: 8 }, (_, index) => Item ${index + 1});
function Example() {
return (
要点:
- 父容器需要明确高度/宽度,否则不会产生滚动区域。
-
orientation 支持 y | x | xy,默认 y。
- hideMasks 可隐藏遮罩提示,showScrollbar 可显式显示滚动条。小程序使用
page.json / index.json 注册:`json
{
"usingComponents": {
"s-scrollbox": "@srcube-ui/scrollbox/mini/index"
}
}
`基础用法:
`wxml
{{item}}
`横向滚动(建议子项固定宽度):
`wxml
{{item}}
`可用属性(核心)
-
orientation: y | x | xy
- hideMasks: boolean
- showScrollbar: boolean | null
- 事件:React 使用 onScroll / onScrollToUpper / onScrollToLower,小程序使用 bind:scroll / bind:scrolltoupper / bind:scrolltolower`