MovableArea
MovableView 的可移动区域。
导入
import { MovableArea } from '@ray-js/ray';属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
|---|---|---|---|---|---|
| scaleArea | boolean | false | 否 | 当里面的 MovableView 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 MovableArea | Web |
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
MovableView
可移动的视图容器，在页面中可以拖拽滑动。MovableView 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
导入
import { MovableView } from '@ray-js/ray';属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
|---|---|---|---|---|---|
| direction | string | none | 否 | MovableView 的移动方向，属性值有 all、vertical、horizontal、none | Web |
| inertia | boolean | false | 否 | MovableView 是否带有惯性 | Web |
| outOfBounds | boolean | false | 否 | 超过可移动区域后，movable-view 是否还可以移动 | Web |
| x | number | 0 | 否 | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围。改变 x 的值会触发动画 | Web |
| y | number | 0 | 否 | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围。改变 y 的值会触发动画 | Web |
| damping | number | 20 | 否 | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快 | Web |
| friction | number | 2 | 否 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值 | Web |
| disabled | boolean | false | 否 | 是否禁用 | Web |
| scale | boolean | false | 否 | 是否支持双指缩放，默认缩放手势生效区域是在 MovableView 内 | Web |
| scaleMin | number | 0.5 | 否 | 定义缩放倍数最小值 | Web |
| scaleMax | number | 10 | 否 | 定义缩放倍数最大值 | Web |
| scaleValue | number | 1 | 否 | 定义缩放倍数，取值范围为 0.5 - 10 | Web |
| animation | boolean | true | 否 | 是否使用动画 | Web |
| onChange | eventhandle | 否 | 拖动过程中触发的事件，event.detail = {x, y, source} | Web | |
| onScale | eventhandle | 否 | 缩放过程中触发的事件，event.detail = {x, y, scale} | Web |
onChange 返回的 source 表示产生移动的原因
| 值 | 说明 |
|---|---|
| touch | 拖动 |
| touchOutOfBounds | 超出移动范围 |
| outOfBounds | 超出移动范围后的回弹 |
| friction | 惯性 |
| 空字符串 | setData |
示例代码
- index.module.less
.item-wrap {
margin: 16px 0;
padding: 10px 0;
border-bottom: 1px solid var(--ty-native-checkbox-border);
}
.area-wrap {
display: flex;
justify-content: space-around;
}
.area {
flex: none;
height: 200px;
width: 200px;
margin: 10px;
background-color: #ccc;
overflow: hidden;
}
.block {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
background: var(--ty-native-primary-color);
color: #fff;
}
.btn-line {
text-align: center;
}
.btn-line .btn {
display: inline-block;
width: 240px;
}
.btn-line .sec-btn {
margin-top: 10px;
}基本使用
import React, { useState } from 'react';
import {
View,
MovableView,
MovableArea,
Text,
Button,
} from '@ray-js/components';
import './style.less';
export default function () {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const moveFn = () => {
setX(30);
setY(30);
};
const moveStep = () => {
setX(x + 10);
setY(y + 10);
};
return (
<View>
<View className="item-wrap">
<View className="area-wrap">
<MovableArea className="area">
<MovableView className="block" x={x} y={y} direction="all">
<Text>Text</Text>
</MovableView>
</MovableArea>
</View>
<View className="btn-wrap">
<View className="btn-line">
<Button type="primary" onClick={moveFn} className="btn">
点击移动到(30px, 30px)
</Button>
</View>
<View className="btn-line">
<Button type="primary" onClick={moveStep} className="btn sec-btn">
{`点击移动到(${x + 10}px, ${y + 10}px)`}
</Button>
</View>
</View>
</View>
</View>
);
}👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
