{"bugs":{"url":"https://github.com/raxjs/rax-scrollview/issues"},"dist":{"shasum":"c55c56c39067c0c06568dc113812cf364fb8f9f8","tarball":"https://registry.npmjs.org/rax-scrollview/-/rax-scrollview-1.1.4-0.tgz","fileCount":23,"integrity":"sha512-0ZH7BPtckwJiKdcXKAINR/XcD1KNWtbTGZ+KuKtqvgI+eCYcfCzzOw13/qTn46ZCRyvf2XdPoLAZS1KXVa8EzA==","signatures":[{"sig":"MEUCID3LoY5WXwJ/IFqctr8c/QeAm0rMpOHy65vzT+Ta/BrsAiEAwEvtoHgGxy+oNvg0HBfD0fF1GUULVMK6C085JpeHmqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1627CRA9TVsSAnZWagAA4IMQAJoEM9oB5fKIr4heqflt\nOoBY1+GQrsjJGfHjOi+f3LI6w40ZN0b/iwP1NSVoinWMh8wiJUChgXAZTqEq\nV4WCfRAB9tQt7t50wp/J+s3T+xrQXu0qv2hfa4YoiJWYg3dEp1+RYyyX8pUo\nX/yLAt67jbttGS8GjzSXG1t2JsFEgwapqxi7wwpzkggkb2xOgtLeelgWYtii\nPkZ1OIJLlmtb6OX1Hrc1Iv/krnSZQln0oR22EH7whMzTHkadSC07fmKOth/y\nsfAO/5u0wp2FJewBchJ3EhQEtjEAqv/jnyTSPYs66hl5QnZtwv4jDdrZx2Ty\nYDhINjyTcCGHcU0JTXZX9zkFJriid3pUBM13iGFQ7cJmvugfMyuTW5EZefL+\nq0fKvoe5bc/8dWaac/aRA1MXjZmkKJKvRMMRzVjgOl+GAeN5bnP//rm77NG0\nOYG9jzwX5iUgKbDf9vaXjXCqMkNt0V5Ydb3MwIIh7E1rMYXavmNPykFKXwDd\nlkkAqOgjs76CCnVL9q9uy8xyI59OQql1XHFzjbYgg0BRnWpEmbKl3xQrXC5H\n3JWZ/oDhvi3D+ZqHTc7PpGSTMFcEyLG51eg0w3wYBsxd3mMh7MdPMQL2RN/g\nR6nibUFBmh4H7mMQoOvN41T3TDpeR1WGgF4mOJhYl6aQY/fGp10l6FxunViA\n5hSU\r\n=S7yL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-scrollview","husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"[![npm](https://img.shields.io/npm/v/rax-scrollview.svg)](https://www.npmjs.com/package/rax-scrollview)\n\n## 描述\n\nScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。\n\n## 安装\n\n```bash\n$ npm install rax-scrollview --save\n```\n\n## 属性\n\n注：\n1、**支持**列表中的 <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 h5 <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 weex <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表阿里小程序 <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> 代表微信小程序\n\n| **属性**                       | **类型**   | **默认值** | **必填** | **描述**                                                          | **支持**                                                                                                                                                                                                                                                                                                                                                               |\n| ------------------------------ | ---------- | ---------- | -------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| scrollEventThrottle            | `number`   | 100        | false    | 这个属性控制在滚动过程中，scroll 事件被调用的频率，用于滚动的节流 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />                                                                                                                         |\n| horizontal                     | `boolean`  | -          | false    | 设置为横向滚动                                                    | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| showsHorizontalScrollIndicator | `boolean`  | true       | false    | 是否允许出现水平滚动条                                            | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />                                                                                                                         |\n| showsVerticalScrollIndicator   | `boolean`  | true       | false    | 是否允许出现垂直滚动条                                            | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />                                                                                                                         |\n| onEndReachedThreshold          | `number`   | 500        | false    | 设置加载更多的偏移                                                | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| onEndReached                   | `function` | -          | false    | 滚动区域还剩`onEndReachedThreshold`的长度时触发                   | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| onScroll                       | `function` | -          | false    | 滚动时触发的事件，返回当前滚动的水平垂直距离                      | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n\n## 方法\n\n### scrollTo({x: number,y: number, animated?: boolean, duration?: number})\n\n#### 参数\n\n**参数为 object，包含以下属性**\n\n| **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** |\n| -------- | -------- | ---------- | ------------ | ------------------- |------------------- |\n| x | `number` | - | 否 | \b 横向的偏移量 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| y | `number` | - | 否 | 纵向的偏移量 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| animated | `boolean` | `true` | 否 | 在设置滚动条位置时使用动画过渡 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| duration | `number` | 400 | 否 | 当 `animated` 设置为 `true` 时，可以设置 duration 来控制动画的执行时间，单位 `ms` | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n\n### scrollIntoView({id: string, animated?: boolean, duration?: number})\n\n#### 参数\n\n**参数为 `object`，包含以下属性**\n\n| **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** |\n| -------- | -------- | ---------- | ------------ | ------------------- |------------------- |\n| id | `string` | - | 是 | 需要滚动到的元素 `id` | <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| animated | `boolean` | `true` | 否 | 在设置滚动条位置时使用动画过渡 | <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| duration | `number` | 400 | 否 | 当 `animated` 设置为 `true` 时，可以设置 duration 来控制动画的执行时间，单位 `ms` | <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n\n## 示例\n\n```jsx\nimport { createElement, Component, render, createRef } from 'rax';\n\nimport DriverUniversal from 'driver-universal';\nimport View from 'rax-view';\nimport Text from 'rax-text';\nimport ScrollView from 'rax-scrollview';\n\nfunction Thumb() {\n  return (\n    <View style={styles.button}>\n      <View style={styles.box} />\n    </View>\n  );\n}\n\nconst THUMBS = new Array(20).fill(1);\nconst createThumbRow = (val, index) => <Thumb key={index} />;\n\nclass App extends Component {\n  state = {\n    horizontalScrollViewEventLog: false,\n    scrollViewEventLog: false,\n  };\n  constructor(props) {\n    super(props);\n    this.horizontalScrollView = createRef();\n  }\n\n  render() {\n    return (\n      <View style={styles.root}>\n        <View style={styles.container}>\n          <ScrollView\n            ref={this.horizontalScrollView}\n            style={{\n              height: '100rpx',\n            }}\n            horizontal={true}\n            onEndReached={() =>\n              this.setState({ horizontalScrollViewEventLog: true })\n            }\n          >\n            {THUMBS.map(createThumbRow)}\n          </ScrollView>\n\n          <View\n            style={styles.button}\n            onClick={() => {\n              this.horizontalScrollView.current.scrollTo({ x: 0 });\n            }}\n          >\n            <Text>Scroll to start</Text>\n          </View>\n\n          <View style={styles.eventLogBox}>\n            <Text>\n              {this.state.horizontalScrollViewEventLog ? 'onEndReached' : ''}\n            </Text>\n          </View>\n        </View>\n\n        <View style={{ ...styles.container, height: '500rpx' }}>\n          <ScrollView\n            ref={scrollView => {\n              this.scrollView = scrollView;\n            }}\n            onEndReached={() => this.setState({ scrollViewEventLog: true })}\n          >\n            <View>\n              <View style={styles.sticky}>\n                <Text>Cannot sticky</Text>\n              </View>\n            </View>\n\n            <View style={styles.sticky}>\n              <Text>Sticky view must in ScrollView root</Text>\n            </View>\n\n            {THUMBS.map(createThumbRow)}\n          </ScrollView>\n\n          <View\n            style={styles.button}\n            onClick={() => {\n              this.scrollView.scrollTo({ y: 0 });\n            }}\n          >\n            <Text>Scroll to top</Text>\n          </View>\n\n          <View style={styles.eventLogBox}>\n            <Text>{this.state.scrollViewEventLog ? 'onEndReached' : ''}</Text>\n          </View>\n        </View>\n      </View>\n    );\n  }\n}\n\nconst styles = {\n  root: {\n    width: '750rpx',\n    paddingTop: '20rpx',\n  },\n  sticky: {\n    position: 'sticky',\n    width: '750',\n    backgroundColor: '#cccccc',\n  },\n  container: {\n    padding: '20rpx',\n    borderStyle: 'solid',\n    borderColor: '#dddddd',\n    borderWidth: '1rpx',\n    marginLeft: '20rpx',\n    marginRight: '20rpx',\n    marginBottom: '10rpx',\n  },\n  button: {\n    margin: '7rpx',\n    padding: '5rpx',\n    alignItems: 'center',\n    backgroundColor: '#eaeaea',\n    borderRadius: '3rpx',\n  },\n  box: {\n    width: '64rpx',\n    height: '64rpx',\n  },\n  eventLogBox: {\n    padding: '10rpx',\n    margin: '10rpx;,\n    height: '80rpx',\n    borderWidth: '1rpx',\n    borderColor: '#f0f0f0',\n    backgroundColor: '#f9f9f9',\n  },\n};\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","engines":{"npm":">=3.0.0"},"license":"BSD-3-Clause","scripts":{"lint":"eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src --fix","test":"rax-scripts test","build":"npm run clean && rax-scripts build","clean":"rm -rf ./lib && rm -rf ./package-lock.json && rm -rf ./demo/miniapp/lib","start":"rax-scripts start","prepublishOnly":"npm run build"},"_npmUser":{"name":"recover758126","email":"761647716@qq.com"},"homepage":"https://github.com/raxjs/rax-scrollview","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"6.11.3","description":"ScrollView component for Rax.","directories":{},"lint-staged":{"*.{js,jsx,ts,tsx}":["eslint --fix","git add"]},"maintainers":[{"name":"amdgigabyte","email":"amdgigabyte@gmail.com"},{"name":"liangzhi.llz","email":"liangzhi.llz@alibaba-inc.com"},{"name":"recover758126","email":"761647716@qq.com"},{"name":"solojiang","email":"feifeishen1996@gmail.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yacheng","email":"narutosun2@163.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"zeroling","email":"wssgcg1213@qq.com"}],"_nodeVersion":"10.16.0","dependencies":{"rax-text":"^1.0.1","rax-view":"^1.1.0","classnames":"^2.2.6","universal-env":"^1.0.0","rax-find-dom-node":"^1.0.0","rax-refreshcontrol":"^1.0.0"},"miniappConfig":{"main":"lib/miniapp/index","propsMap":{"onEndReachedThreshold":"endReachedThreshold"},"main:wechat":"lib/miniapp-wechat/index"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^3.0.5","eslint":"^5.16.0","csstype":"^2.6.4","typescript":"^3.5.3","@types/jest":"^24.0.12","driver-weex":"^1.0.0","lint-staged":"^9.2.5","rax-scripts":"^2.0.0","@rax-types/rax":"^1.0.5","@types/ali-app":"^1.0.0","driver-universal":"^1.0.0","@types/classnames":"^2.2.9","eslint-config-rax":"^0.0.0","rax-test-renderer":"^1.0.0","rax-plugin-component":"^0.1.9","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-scrollview_1.1.4-0_1574415802529_0.6122235509267961","host":"s3://npm-registry-packages"},"_id":"rax-scrollview@1.1.4-0","version":"1.1.4-0"}