libAgile

Appearance

滚动容器 ​

自定义滚动条样式的滚动容器，基于浏览器原生滚动实现，既保留了原生滚动的性能，又具备自定义样式能力，使用起来更是比写 div 还方便。

基本使用 ​

当内容超过容器宽高时会自动出现对应滚动条

占位内容
查看代码
jsx

import ScrollBar from 'lib-agile/es/components/scrollBar/index.react.js'
import 'lib-agile/es/components/scrollBar/index.css'

const App = () => {
  return (
    <ScrollBar style={{ height: '200px' }}>
      <div style={{ width: '1000px', height: '500px' }}>
        asd
      </div>
    </ScrollBar>
  )
}

export default App;

滚动条交互形式 ​

让滚动条一直显示

占位内容
查看代码
jsx

import ScrollBar from 'lib-agile/es/components/scrollBar/index.react.js'
import 'lib-agile/es/components/scrollBar/index.css'

const App = () => {
  return (
    <ScrollBar type={'show'} style={{ height: '200px' }}>
      <div style={{ width: '1000px', height: '500px' }}>
        asd
      </div>
    </ScrollBar>
  )
}

export default App;

设置滚动偏移量 ​

占位内容
占位内容
查看代码
jsx

import ScrollBar from 'lib-agile/es/components/scrollBar/index.react.js'
import 'lib-agile/es/components/scrollBar/index.css'

const App = () => {
  return (
    <ScrollBar offsetLeft={50} offsetRight={50} offsetTop={50} offsetBottom={50} style={{ height: '200px' }}>
      <div style={{ width: '1000px', height: '500px' }}>
        asd
      </div>
    </ScrollBar>
  )
}
export default App;

api ​

props ​

参数说明类型默认值
type滚动类型。可选值为：show hover hidestringhover
minBarSize滚动条最小尺寸，x 轴滚动时宽度不小于这个值，y 轴滚动时高度不小于这个值number50
offsetLeftx 轴滚动条左边偏移量number0
offsetRightx 轴滚动条右边偏移量number10
offsetTopy 轴滚动条上边偏移量number0
offsetBottomy 轴滚动条下边偏移量number10

事件 ​

事件名称说明回调参数
scroll滚动后触发function(scrollData, e)

方法 ​

方法名称说明参数
updated默认情况下会监听子节点变动，但手动更改 dom 后导致的容器内容变更需要手动触发滚动组件更新updated()
setScrollLeft手动设置 x 轴滚动位置setScrollLeft(num: number)
setScrollTop手动设置 y 轴滚动位置setScrollTop(num: number)