diff --git a/README.md b/README.md index a5ae2ff..f15bc35 100644 --- a/README.md +++ b/README.md @@ -86,11 +86,18 @@ const config = { ## 类库 -* [x] [react-vtree](docs/react-vtree.mdx) - 虚拟滚动树 - * [x] `FixedSizeTree` +### 虚拟滚动 + * [x] [react-window](docs/react-window.mdx) - 虚拟滚动 * [x] `FixedSizeList` * [x] `VariableSizeList` +* [x] [react-vtree](docs/react-vtree.mdx) - 虚拟滚动树 + * [x] `FixedSizeTree` + +### 交互动画 + +* [x] [react-spring](docs/react-spring.mdx) - 弹性物理动画 +* [x] [react-use-gesture](docs/react-use-gesture.mdx) - 触摸手势 ## 支持 diff --git a/docs/react-use-gesture.mdx b/docs/react-use-gesture.mdx new file mode 100644 index 0000000..daefaa8 --- /dev/null +++ b/docs/react-use-gesture.mdx @@ -0,0 +1,30 @@ +--- +id: react-use-gesture +title: react-use-gesture +sidebar_label: react-use-gesture +--- + +## [react-use-gesture](https://github.com/react-spring/react-use-gesture) + +### 使用 + +```jsx +import React from 'react' +import { View } from '@tarojs/components' +import { useDrag } from 'react-use-gesture' +import { useGestureConfig } from '@tarojsx/library' + +const Demo = () => { + const [gestureConfig, containerProps] = useGestureConfig() + + const bind = useDrag(({ down, movement: [mx, my], direction: [xDir, yDir], distance, cancel }) => { + console.log('按下', down) + console.log('轴移动距离', mx, my) + console.log('轴移动方向', xDir, yDir) + console.log('直线移动距离', distance) + console.log('取消拖动操作', cancel) + }, gestureConfig) + + return {} +} +``` diff --git a/docs/react-window.mdx b/docs/react-window.mdx index 34f5ccb..6569004 100644 --- a/docs/react-window.mdx +++ b/docs/react-window.mdx @@ -6,23 +6,17 @@ sidebar_label: react-window ## [react-window](https://github.com/bvaughn/react-window) -### 安装 - -`npm i react-window` - -`npm i -D @types/react-window` - ### 使用 ```jsx import React from 'react' import Taro from '@tarojs/taro' import { View } from '@tarojs/components' -import { FixedSizeList } from 'react-window' +import { FixedSizeList } from '@tarojsx/library' const { windowWidth, windowHeight } = Taro.getSystemInfoSync() -const Example = () => ( +const Demo = () => ( {({ index, style }) => Row {index}}