@ice/scrollview

ScrollView 是一个包装了滚动操作的容器型组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。

安装

$ npm i @ice/scrollview --save

使用

import ScrollView from '@ice/scrollview';

支持

Web / 小程序

属性

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | ------------------------------ | ---------- | ---------- | -------- | --------------------------------------------------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | scrollEventThrottle | number | 50 | false | 这个属性控制在滚动过程中，scroll 事件被调用的频率，用于滚动的节流 | | | horizontal | boolean | - | false | 设置为横向滚动 | | | scrollTop | number | 0 | false | 竖向滚动距离，优先级高于scrollTo方法（注：运行时小程序无法生效，请使用 scrollTo 方案） | | | scrollLeft | number | 0 | false | 横向滚动距离，优先级高于scrollTo方法（注：运行时小程序无法生效，请使用 scrollTo 方案） | | | showsHorizontalScrollIndicator | boolean | true | false | 是否允许出现水平滚动条 | | | showsVerticalScrollIndicator | boolean | true | false | 是否允许出现垂直滚动条 | | | onEndReachedThreshold | number | 500 | false | 设置加载更多的偏移 | | | onEndReached | function | - | false | 滚动区域还剩onEndReachedThreshold的长度时触发 | | | onScroll | function | - | false | 滚动时触发的事件，返回当前滚动的水平垂直距离 | | | onTouchStart | function | - | false | touchStart 触发的事件，返回触摸点数据（touches、changedTouches） | | | onTouchMove | function | - | false | touchMove 触发的事件，返回触摸点数据（touches、changedTouches） | | | onTouchEnd | function | - | false | touchEnd 触发的事件，返回触摸点数据（touches、changedTouches） | | | onTouchCancel | function | - | false | touchCancel 触发的事件，返回触摸点数据（touches、changedTouches） | | | disableScroll | boolean | - | false | 是否禁止滚动 | |

方法

scrollTo({x: number,y: number, animated?: boolean, duration?: number})

参数

参数为 object，包含以下属性

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | -------- | --------- | ---------- | -------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | x | number | - | 否 |  横向的偏移量 | | | y | number | - | 否 | 纵向的偏移量 | | | animated | boolean | true | 否 | 在设置滚动条位置时使用动画过渡 | | | duration | number | 400 | 否 | 当 animated 设置为 true 时，可以设置 duration 来控制动画的执行时间，单位 ms | |

scrollIntoView({id: string, animated?: boolean, duration?: number})

参数

参数为 object，包含以下属性

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | -------- | --------- | ---------- | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | - | 是 | 需要滚动到的元素 id | | | animated | boolean | true | 否 | 在设置滚动条位置时使用动画过渡 | | | duration | number | 400 | 否 | 当 animated 设置为 true 时，可以设置 duration 来控制动画的执行时间，单位 ms | |

示例

import { createElement, Component, useRef } from 'react';
import ScrollView from '@ice/scrollview';

const THUMBS = new Array(20).fill(1);
const createThumbRow = (val, index) => <Thumb key={index} />;

function Thumb() {
  return (
    <div style={styles.button}>
      <div style={styles.box} />
    </div>
  );
}

function DEMO(props) {
  const [end, setEnd] = useState(false);
  const ref = useRef(null);
  return (
    <div style={styles.root}>
      <div style={styles.container}>
        <ScrollView
          ref={ref}
          style={{ height: '100rpx' }}
          horizontal={true}
          onEndReached={() => setEnd(true)}
        >
          {THUMBS.map(createThumbRow)}
        </ScrollView>

        <div
          style={styles.button}
          onClick={() => {
            ref.current.scrollTo({ x: 0 });
          }}
        >
          <span>Scroll to start</span>
        </div>

        <div style={styles.eventLogBox}>
          <span>
            {end ? 'onEndReached' : ''}
          </span>
        </div>
      </div>
    </div>
  );
}
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',
  },
};