movable-view 可移动视图容器

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

属性说明

属性名类型默认值必填说明
directionStringnone否movable-view 的移动方向，属性值有 all 、 vertical 、 horizontal 、 none
inertiaBooleanfalse否movable-view 是否带有惯性
out-of-boundsBooleanfalse否超过可移动区域后，movable-view 是否还可以移动。
xNumber否定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。
yNumber否定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。
dampingNumber20否阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。
frictionNumber2否摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值。
disabledBooleanfalse否是否禁用
scaleBooleanfalse否是否支持双指缩放，默认缩放手势生效区域是在movable-view内。
scale-minNumber0.5否定义缩放倍数最小值
scale-maxNumber10否定义缩放倍数最大值
scale-valueNumber1否定义缩放倍数，取值范围为 0.5 - 10 。
animationBooleantrue否是否使用动画
bindchangeEventHandle否拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）。
bindscaleEventHandle否缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}
htouchmoveEventHandle否手指初次触摸后发生横向移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmoveEventHandle否手指初次触摸后发生纵向移动，如果catch此事件，则意味着touchmove事件也被catch

direction 有效值

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

示例

在开发者工具中预览效果

扫码体验

movable-view 可移动视图容器 - 图2请使用百度APP扫码

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

  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

  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. });

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

  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：只可以纵向移动

  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： 可超出边界

  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： 带有惯性

  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： 可放缩

  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. });

代码示例 8: 可悬浮菜单

在开发者工具中预览效果

  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. });

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 必须在组件中，并且必须是直接子节点，否则不能移动。