UNPKG

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