1
import * as React from 'react';
2 3
import { createHostComponent } from '@remax/runtime';
3
import { BaseProps, GenericEvent } from '../../types/component';
4

5
// can't extends from BaseProps, bacause this MovableViewProps overwrite animation to boolean
6
export interface MovableViewProps extends Omit<BaseProps, 'animation'> {
7
  /** (default: none) movable-view的移动方向,属性值有all、vertical、horizontal、none 1.2.0 */
8
  direction?: string;
9
  /** (default: false) movable-view是否带有惯性 1.2.0 */
10
  inertia?: boolean;
11
  /** (default: false) 超过可移动区域后,movable-view是否还可以移动 1.2.0 */
12
  outOfBounds?: boolean;
13
  /** 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 1.2.0 */
14
  x?: number;
15
  /** 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 1.2.0 */
16
  y?: number;
17
  /** (default: 20) 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 1.2.0 */
18
  damping?: number;
19
  /** (default: 2) 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 1.2.0 */
20
  friction?: number;
21
  /** (default: false) 是否禁用 1.9.90 */
22
  disabled?: boolean;
23
  /** (default: false) 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 1.9.90 */
24
  scale?: boolean;
25
  /** (default: 0.5) 定义缩放倍数最小值 1.9.90 */
26
  scaleMin?: number;
27
  /** (default: 10) 定义缩放倍数最大值 1.9.90 */
28
  scaleMax?: number;
29
  /** (default: 1) 定义缩放倍数,取值范围为 0.5 - 10 1.9.90 */
30
  scaleValue?: number;
31
  /**
32
   * 是否使用动画 2.1.0
33
   */
34
  animation?: boolean;
35
  /** 拖动过程中触发的事件,event.detail = {x, y, source} 1.9.90 */
36
  onChange?: (event: GenericEvent) => any;
37
  /** 缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持 1.9.90 */
38
  onScale?: (event: GenericEvent) => any;
39
  /** 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch 1.9.90 */
40
  hTouchMove?: (event: GenericEvent) => any;
41
  /** 初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch 1.9.90 */
42
  vTouchMove?: (event: GenericEvent) => any;
43
}
44
/**
45
 * https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
46
 */
47 3
export const MovableView: React.ComponentType<MovableViewProps> = createHostComponent<MovableViewProps>('movable-view');
48

49 3
MovableView.defaultProps = {
50
  direction: 'none',
51
  inertia: false,
52
  outOfBounds: false,
53
  damping: 20,
54
  friction: 2,
55
  disabled: false,
56
  scale: false,
57
  scaleMin: 0,
58
  scaleMax: 10,
59
  scaleValue: 1,
60
  animation: true,
61
};

Read our documentation on viewing source code .

Loading