UNPKG

4.63 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction, TouchEventFunction } from './common'
3
4interface MovableViewProps extends Omit<StandardProps, 'animation'> {
5 /** movable-view 的移动方向,属性值有`all`、`vertical`、`horizontal`、`none`
6 * @default none
7 * @supported weapp, rn, tt
8 */
9 direction?: 'all' | 'vertical' | 'horizontal' | 'none'
10
11 /** movable-view 是否带有惯性
12 * @default false
13 * @supported weapp, tt
14 */
15 inertia?: boolean
16
17 /** 超过可移动区域后,movable-view 是否还可以移动
18 * @default false
19 * @supported weapp, tt
20 */
21 outOfBounds?: boolean
22
23 /** 定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围;改变 x 的值会触发动画
24 * @supported weapp, rn, tt
25 */
26 x?: number | string
27
28 /** 定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画
29 * @supported weapp, rn, tt
30 */
31 y?: number | string
32
33 /** 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
34 * @default 20
35 * @supported weapp, tt
36 */
37 damping?: number
38
39 /** 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于 0,否则会被设置成默认值
40 * @default 2
41 * @supported weapp, tt
42 */
43 friction?: number
44
45 /** 是否禁用
46 * @default false
47 * @supported weapp, rn, tt
48 */
49 disabled?: boolean
50
51 /** 是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内
52 * @default false
53 * @supported weapp, tt
54 */
55 scale?: boolean
56
57 /** 定义缩放倍数最小值
58 * @default 0.5
59 * @supported weapp, tt
60 */
61 scaleMin?: number
62
63 /** 定义缩放倍数最大值
64 * @default 10
65 * @supported weapp, tt
66 */
67 scaleMax?: number
68
69 /** 定义缩放倍数,取值范围为 0.5 - 10
70 * @default 1
71 * @supported weapp, tt
72 */
73 scaleValue?: number
74
75 /** 是否使用动画
76 * @default true
77 * @supported weapp, tt
78 */
79 animation?: boolean
80
81 /** 拖动过程中触发的事件
82 * @supported weapp, tt
83 */
84 onChange?: CommonEventFunction<MovableViewProps.onChangeEventDetail>
85
86 /** 缩放过程中触发的事件
87 * @supported weapp, tt
88 */
89 onScale?: CommonEventFunction<MovableViewProps.onScaleEventDetail>
90
91 /** 初次手指触摸后移动为横向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch
92 * @supported weapp, tt
93 */
94 onHTouchMove?: TouchEventFunction
95
96 /** 初次手指触摸后移动为纵向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch
97 * @supported weapp, tt
98 */
99 onVTouchMove?: TouchEventFunction
100 /** 开始拖动时触发
101 * @supported rn
102 */
103 onDragStart?: CommonEventFunction
104 /** 拖动结束时触发
105 * @supported rn
106 */
107 onDragEnd?: CommonEventFunction
108}
109
110declare namespace MovableViewProps {
111 /** 拖动过程中触发的事件 */
112 interface TChangeSource {
113 /** 拖动 */
114 touch
115 /** 超出移动范围 */
116 'touch-out-of-bounds'
117 /** 超出移动范围后的回弹 */
118 'out-of-bounds'
119 /** 惯性 */
120 'friction'
121 /** setData */
122 ''
123 }
124
125 interface onChangeEventDetail {
126 /** X 坐标 */
127 x: number
128 /** Y 坐标 */
129 y: number
130 /** 触发事件 */
131 source: keyof MovableViewProps.TChangeSource
132 }
133
134 interface onScaleEventDetail {
135 /** X 坐标 */
136 x: number
137 /** Y 坐标 */
138 y: number
139 /** 缩放比例 */
140 scale: number
141 }
142}
143
144/** 可移动的视图容器,在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。
145 * @classification viewContainer
146 * @supported weapp, swan, alipay, rn, tt
147 * @example_react
148 * ```tsx
149 * class App extends Components {
150 * render () {
151 * return (
152 * <MovableArea style='height: 200px; width: 200px; background: red;'>
153 * <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
154 * </MovableArea>
155 * )
156 * }
157 * }
158 * ```
159 * @example_vue
160 * ```html
161 * <movable-area style='height: 200px; width: 200px; background: red;'>
162 * <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>带我走</movable-view>
163 * </movable-area>
164 * ```
165 * @see https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
166 */
167declare const MovableView: ComponentType<MovableViewProps>
168
169export { MovableView, MovableViewProps }