@srcube-ui/scrollbox

v0.0.1

跨 React 与微信小程序的滚动容器组件。

0/weekUpdated 1 weeks agoUnpacked: 303.3 KB

Published by chioio

npm install @srcube-ui/scrollbox

npm

@srcube-ui/scrollbox

跨 React 与微信小程序的滚动容器组件。

包暴露

- @srcube-ui/scrollbox / @srcube-ui/scrollbox/style：基础样式与类型定义
- @srcube-ui/scrollbox/react：React 组件（Scrollbox）
- @srcube-ui/scrollbox/mini：微信小程序组件（s-scrollbox）

React 快速上手

``tsx import { Scrollbox } from '@srcube-ui/scrollbox/react';

const items = Array.from({ length: 8 }, (_, index) => Item ${index + 1});

function Example() { return (


      
        
          {items.map((item) => (
                          key={item}
              className="h-12 rounded-xl bg-slate-100 px-4 text-sm font-semibold text-slate-700"
            >
              {item}
            

          ))}


  );
}

要点： - 父容器需要明确高度/宽度，否则不会产生滚动区域。 -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`