# @ice/scrollview [![npm](https://img.shields.io/npm/v/@ice/scrollview.svg?style=flat&logo=npm)](https://www.npmjs.com/package/@ice/scrollview) ScrollView 是一个包装了滚动操作的容器型组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。 ## 安装 ```bash $ npm i @ice/scrollview --save ``` ## 使用 ```jsx import ScrollView from '@ice/scrollview'; ``` ## 支持 Web / 小程序 ## 属性 | **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** | | ------------------------------ | ---------- | ---------- | -------- | --------------------------------------------------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | scrollEventThrottle | `number` | 50 | false | 这个属性控制在滚动过程中，scroll 事件被调用的频率，用于滚动的节流 | browser weex | | horizontal | `boolean` | - | false | 设置为横向滚动 | browser weexminiApp wechatMiniprogrambytedanceMicroApp quickApp | | scrollTop | `number` | 0 | false | 竖向滚动距离，优先级高于`scrollTo`方法（注：运行时小程序无法生效，请使用 `scrollTo` 方案） | miniApp wechatMiniprogrambytedanceMicroApp | | scrollLeft | `number` | 0 | false | 横向滚动距离，优先级高于`scrollTo`方法（注：运行时小程序无法生效，请使用 `scrollTo` 方案） | miniApp wechatMiniprogrambytedanceMicroApp | | showsHorizontalScrollIndicator | `boolean` | true | false | 是否允许出现水平滚动条 | browser weex | | showsVerticalScrollIndicator | `boolean` | true | false | 是否允许出现垂直滚动条 | browser weex | | onEndReachedThreshold | `number` | 500 | false | 设置加载更多的偏移 | browser weexminiApp wechatMiniprogrambytedanceMicroApp | | onEndReached | `function` | - | false | 滚动区域还剩`onEndReachedThreshold`的长度时触发 | browser weexminiApp wechatMiniprogrambytedanceMicroAppquickApp | | onScroll | `function` | - | false | 滚动时触发的事件，返回当前滚动的水平垂直距离 | browser weexminiApp wechatMiniprogrambytedanceMicroApp quickApp | | onTouchStart | `function` | - | false | touchStart 触发的事件，返回触摸点数据（touches、changedTouches） | browser weexminiApp | | onTouchMove | `function` | - | false | touchMove 触发的事件，返回触摸点数据（touches、changedTouches） | browser weexminiApp | | onTouchEnd | `function` | - | false | touchEnd 触发的事件，返回触摸点数据（touches、changedTouches） | browser weexminiApp | | onTouchCancel | `function` | - | false | touchCancel 触发的事件，返回触摸点数据（touches、changedTouches） | miniApp | | disableScroll | `boolean` | - | false | 是否禁止滚动 | browser miniApp | ## 方法 ### scrollTo({x: number,y: number, animated?: boolean, duration?: number}) #### 参数 **参数为 object，包含以下属性** | **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** | | -------- | --------- | ---------- | -------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | x | `number` | - | 否 |  横向的偏移量 | browser weexminiApp wechatMiniprogrambytedanceMicroApp | | y | `number` | - | 否 | 纵向的偏移量 | browser weexminiApp wechatMiniprogrambytedanceMicroApp | | animated | `boolean` | `true` | 否 | 在设置滚动条位置时使用动画过渡 | browser weexminiApp wechatMiniprogrambytedanceMicroApp | | duration | `number` | 400 | 否 | 当 `animated` 设置为 `true` 时，可以设置 duration 来控制动画的执行时间，单位 `ms` | browser miniApp wechatMiniprogrambytedanceMicroApp | ### scrollIntoView({id: string, animated?: boolean, duration?: number}) #### 参数 **参数为 `object`，包含以下属性** | **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** | | -------- | --------- | ---------- | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | `string` | - | 是 | 需要滚动到的元素 `id` | weexminiApp wechatMiniprogrambytedanceMicroApp | | animated | `boolean` | `true` | 否 | 在设置滚动条位置时使用动画过渡 | weexminiApp wechatMiniprogrambytedanceMicroApp | | duration | `number` | 400 | 否 | 当 `animated` 设置为 `true` 时，可以设置 duration 来控制动画的执行时间，单位 `ms` | miniApp wechatMiniprogram bytedanceMicroApp | ## 示例 ```jsx import { createElement, Component, useRef } from 'react'; import ScrollView from '@ice/scrollview'; const THUMBS = new Array(20).fill(1); const createThumbRow = (val, index) => ; function Thumb() { return (
); } function DEMO(props) { const [end, setEnd] = useState(false); const ref = useRef(null); return (
setEnd(true)} > {THUMBS.map(createThumbRow)}
{ ref.current.scrollTo({ x: 0 }); }} > Scroll to start
{end ? 'onEndReached' : ''}
); } const styles = { root: { width: '750rpx', paddingTop: '20rpx', }, sticky: { position: 'sticky', width: '750', backgroundColor: '#cccccc', }, container: { padding: '20rpx', borderStyle: 'solid', borderColor: '#dddddd', borderWidth: '1rpx', marginLeft: '20rpx', marginRight: '20rpx', marginBottom: '10rpx', }, button: { margin: '7rpx', padding: '5rpx', alignItems: 'center', backgroundColor: '#eaeaea', borderRadius: '3rpx', }, box: { width: '64rpx', height: '64rpx', }, eventLogBox: { padding: '10rpx', margin: '10rpx', height: '80rpx', borderWidth: '1rpx', borderColor: '#f0f0f0', backgroundColor: '#f9f9f9', }, }; ```