title: movable-view 可移动视图容器 header: develop nav: component sidebar: view_movable-view

webUrl: https://qft12m.smartapps.cn/component/movable-view/movable-view

解释：可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

属性说明

属性名 类型 默认值 必填 说明
direction String none 否 movable-view 的移动方向，属性值有 all 、 vertical 、 horizontal 、 none
inertia Boolean false 否 movable-view 是否带有惯性
out-of-bounds Boolean false 否 超过可移动区域后，movable-view 是否还可以移动。
x Number 否 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。
y Number 否 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。
damping Number 20 否 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。
friction Number 2 否 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值。
disabled Boolean false 否 是否禁用
scale Boolean false 否 是否支持双指缩放，默认缩放手势生效区域是在movable-view内。
scale-min Number 0.5 否 定义缩放倍数最小值
scale-max Number 10 否 定义缩放倍数最大值
scale-value Number 1 否 定义缩放倍数，取值范围为 0.5 - 10 。
animation Boolean true 否 是否使用动画
bindchange EventHandle 否 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）。
bindscale EventHandle 否 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}
htouchmove EventHandle 否 手指初次触摸后发生横向移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove EventHandle 否 手指初次触摸后发生纵向移动，如果catch此事件，则意味着touchmove事件也被catch

direction 有效值

值 说明
all 水平方向和垂直方向
vertical 垂直方向
horizontal 水平方向
none 不可移动

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/movable-view/movable-view - 图1 请使用百度APP扫码

代码示例 1： movable-view区域小于movable-area

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             movable-view区域小于movable-area
  5.         </view>
  6.         <movable-area>
  7.             <movable-view x="{=x1=}" y="{=y1=}" damping="20" disabled="false" direction="all">text</movable-view>
  8.         </movable-area> 
  9.         <button bind:tap="move" class="move-button" type="primary">点击移动到 (50px, 50px)</button>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         x1: 30,
  4.         y1: 30,
  5.     },
  6.     move() {
  7.         this.setData({
  8.             x1: 50,
  9.             y1: 50
  10.         })
  11.     }
  12. });

:::

代码示例 2：movable-view区域大于movable-area

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             movable-view区域大于movable-area
  5.         </view>
  6.         <movable-area>
  7.             <!-- 添加大于movable-area的class -->
  8.             <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>
  9.         </movable-area>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30
  5.     },
  6. });
  1. movable-area {
  2.     width: 3.88rem;
  3.     height: 2.18rem;
  4.     background-color: #fff;
  5.     overflow: hidden;
  6.     margin: 0;
  7.     border-radius: .05rem;
  8. }
  10. movable-view {
  12.     background-color: #5B9FFF;
  13.     color: #fff;
  14.     border-radius: .05rem;
  15.     display: flex;
  16.     align-items: center;
  17.     justify-content: center;
  18. }
  21. .bigger-area {
  22.     width: 4.8rem;
  23.     height: 2.8rem;
  24. }

:::

代码示例 3：只可以横向移动

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         只可以横向移动
  4.     </view>
  5.     <movable-area htouchmove>
  6.         <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>
  7.     </movable-area>
  8. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30
  5.     },
  6. });

:::

代码示例 4：只可以纵向移动

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         只可以纵向移动
  4.     </view>
  5.     <movable-area vtouchmove>
  6.         <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>
  7.     </movable-area>
  8. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30
  5.     },
  6. });

:::

代码示例 5： 可超出边界

:::codeTab

  1. <view class="wrap">
  2.    <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             可超出边界
  5.         </view>
  6.         <movable-area>
  7.             <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>
  8.         </movable-area>
  9.     </view>
  10. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30
  5.     },
  6. });

:::

代码示例 6： 带有惯性

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             带有惯性
  5.         </view>
  6.         <movable-area>
  7.             <movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>
  8.         </movable-area>
  9.     </view>
  10. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30
  5.     },
  6. });

:::

代码示例 7： 可放缩

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             可放缩
  5.         </view>
  6.         <movable-area>
  7.             <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">
  8.                text
  9.             </movable-view>
  10.         </movable-area>
  11.         <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>
  12.     </view>
  13. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30,
  5.         scale: 1
  6.     },
  7.     move() {
  8.         this.setData({
  9.             x1: 50,
  10.             y1: 50
  11.         })
  12.     },
  13.     scale() {
  14.         this.setData({
  15.             scale: 3
  16.         })
  17.     },
  18.     onChange(e) {
  19.         console.log(e.detail)
  20.     },
  21.     onScale(e) {
  22.         console.log(e.detail)
  23.     }
  24. });

:::

Bug & Tip

  • Tip：movable-view 必须设置 width 和 height 属性，不设置默认为 10px。
  • Tip：movable-view 默认为绝对定位，top 和 left 属性为 0px。
  • Tip：当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内。
  • Tip：当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）。
  • Tip：movable-view 必须在组件中，并且必须是直接子节点，否则不能移动。

参考示例

参考示例 1：可悬浮菜单

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <movable-area style="height: {{height}}px; width: {{width}}px; background-color: #f5f5f5">
  3.         <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4">
  4.               菜单
  5.         </movable-view>
  6.     </movable-area>
  7. </view>
  1. Page({
  2.     data: {
  3.         x: 30,
  4.         y: 30,
  5.     },
  6.     onShow() {
  7.         swan.getSystemInfo({
  8.             success: res => {
  9.                 console.log('getSystemInfo success', res);
  10.                 this.setData({
  11.                     'width': res.windowWidth,
  12.                     'height': res.windowHeight
  13.                 });
  14.             },
  15.             fail: err => {
  16.                 console.log('getSystemInfo fail', err);
  17.             }
  18.         });
  19.     }
  20. });

:::