智能小程序 Ray 开发实践——视图容器组件 MovableArea 和 MovableView 介绍

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 小程序开发。