Miss any of our Open RFC calls?Watch the recordings here! »

rax-scrollview

3.3.4 • Public • Published

rax-scrollview

npm

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

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

安装

$ npm install rax-scrollview --save

属性

属性 类型 默认值 必填 描述 支持
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 是否禁止滚动, rax-scrollview@3.3.3 及以上版本支持 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

示例

import { createElement, Component, render, createRef } from 'rax';
 
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import ScrollView from 'rax-scrollview';
 
function Thumb() {
  return (
    <View style={styles.button}>
      <View style={styles.box} />
    </View>
  );
}
 
const THUMBS = new Array(20).fill(1);
const createThumbRow = (val, index) => <Thumb key={index} />;
 
class App extends Component {
  state = {
    horizontalScrollViewEventLog: false,
    scrollViewEventLog: false,
  };
  constructor(props) {
    super(props);
    this.horizontalScrollView = createRef();
  }
 
  render() {
    return (
      <View style={styles.root}>
        <View style={styles.container}>
          <ScrollView
            ref={this.horizontalScrollView}
            style={{
              height: '100rpx',
            }}
            horizontal={true}
            onEndReached={() =>
              this.setState({ horizontalScrollViewEventLog: true })
            }
          >
            {THUMBS.map(createThumbRow)}
          </ScrollView>
 
          <View
            style={styles.button}
            onClick={() => {
              this.horizontalScrollView.current.scrollTo({ x: 0 });
            }}
          >
            <Text>Scroll to start</Text>
          </View>
 
          <View style={styles.eventLogBox}>
            <Text>
              {this.state.horizontalScrollViewEventLog ? 'onEndReached' : ''}
            </Text>
          </View>
        </View>
 
        <View style={{ ...styles.container, height: '500rpx' }}>
          <ScrollView
            ref={scrollView => {
              this.scrollView = scrollView;
            }}
            onEndReached={() => this.setState({ scrollViewEventLog: true })}
          >
            <View>
              <View style={styles.sticky}>
                <Text>Cannot sticky</Text>
              </View>
            </View>
 
            <View style={styles.sticky}>
              <Text>Sticky view must in ScrollView root</Text>
            </View>
 
            {THUMBS.map(createThumbRow)}
          </ScrollView>
 
          <View
            style={styles.button}
            onClick={() => {
              this.scrollView.scrollTo({ y: 0 });
            }}
          >
            <Text>Scroll to top</Text>
          </View>
 
          <View style={styles.eventLogBox}>
            <Text>{this.state.scrollViewEventLog ? 'onEndReached' : ''}</Text>
          </View>
        </View>
      </View>
    );
  }
}
 
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',
  },
};
 
render(<App />, document.body, { driver: DriverUniversal });

Install

npm i rax-scrollview

DownloadsWeekly Downloads

113

Version

3.3.4

License

BSD-3-Clause

Unpacked Size

108 kB

Total Files

44

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar