render-scrollview
描述
ScrollView 是一个包装了滚动操作的组件。需要一个确定的高度来保证 ScrollView 的正常展现。
安装
$ npm install render-scrollview --save
属性
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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 | 是否允许出现垂直滚动条 |
onEndReached | function |
- | false | 滚动区域还剩onEndReachedThreshold 的长度时触发 |
onScroll | function |
- | false | 滚动时触发的事件,返回当前滚动的水平垂直距离 |
onTouchMove | function |
- | false | touchMove 触发的事件,返回触摸点数据(touches、changedTouches) |
onTouchEnd | function |
- | false | touchEnd 触发的事件,返回触摸点数据(touches、changedTouches) |
onTouchCancel | function |
- | false | touchCancel 触发的事件,返回触摸点数据(touches、changedTouches) |
disableScroll | boolean |
- | false | 是否禁止滚动, rax-scrollview@3.3.3 及以上版本支持 |
方法
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, offsetX?: number, offsetY?: number})
参数
参数为 object
,包含以下属性
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
id | string |
- | 是 | 需要滚动到的元素 id
|
animated | boolean |
true |
否 | 在设置滚动条位置时使用动画过渡 |
duration | number |
400 | 否 | 当 animated 设置为 true 时,可以设置 duration 来控制动画的执行时间,单位 ms
|
offsetX | number |
- | 否 | 滚动的额外 X 偏移 |
offsetY | number |
- | 否 | 滚动的额外 Y 偏移 |
示例
import { useRef } from "react";
import ScrollView from "render-scrollview";
import { ScrollViewRefObject } from "render-scrollview/build/lib/types";
import styles from "./index.module.css";
import logopng from "./logo.jpeg";
const Ae86 = () => {
const scrollViewRef = useRef < ScrollViewRefObject > null;
const handleViewScroll = () => {
console.log(scrollViewRef.current.scrollTo({ y: 50 }));
};
const handleResetScroll = () => {
scrollViewRef.current._nativeNode.scrollTop = 0;
};
const handleOnScroll = (e) => {
console.log(e);
};
const handleOnEndReached = () => {
console.log("触底了");
};
const handlePositionScroll = () => {
scrollViewRef.current.scrollIntoView({ id: "password" });
};
return (
<>
<div>
<span onClick={handleViewScroll}>查看滚动</span>
<span onClick={handleResetScroll}>恢复滚动</span>
<span onClick={handlePositionScroll}>指定滚动到的元素</span>
</div>
<ScrollView
scrollEventThrottle={200}
onScroll={handleOnScroll}
onEndReached={handleOnEndReached}
onEndReachedThreshold={50}
ref={scrollViewRef}
style={{
height: "50vh",
}}
>
<div className={styles.container}>
<img className={styles.image} src={logopng} />
<p className={styles.text}>
<span className={styles.letter}>Powered</span>
<span className={styles.letter}> </span>
<span className={styles.letter}>by</span>
<span className={styles.letter}> </span>
<span className={styles.letter}>render</span>
<span className={styles.letter}> </span>
</p>
</div>
</ScrollView>
</>
);
};
export default Ae86;