movable-view 可移动视图容器
- 属性说明
  - direction 有效值
- 示例
  - 代码示例 1：movable-view 区域小于 movable-area
  - 代码示例 2：movable-view 区域大于 movable-area
  - 代码示例 3：只可以横向移动
  - 代码示例 4：只可以纵向移动
  - 代码示例 5：可超出边界
  - 代码示例 6：带有惯性
  - 代码示例 7：可放缩
  - 代码示例 8：可悬浮菜单
- Bug & Tip

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	不可移动

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   movable-view区域小于movable-area

   </view>

   <movable-area>

   <movable-view x="{=x1=}" y="{=y1=}" damping="20" disabled="false" direction="all">text</movable-view>

   </movable-area> 

   <button bind:tap="move" class="move-button" type="primary">点击移动到 (50px, 50px)</button>

   </view>

  </view>

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

SWAN
JS
CSS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   movable-view区域大于movable-area

   </view>

   <movable-area>

   <!-- 添加大于movable-area的class -->

   <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>

   </movable-area>

   </view>

  </view>

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

SWAN
JS


 

  <view class="card-area">

   <view class="top-description border-bottom">

   只可以横向移动

   </view>

   <movable-area htouchmove>

   <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>

   </movable-area>

  </view>

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

SWAN
JS


 

  <view class="card-area">

   <view class="top-description border-bottom">

   只可以纵向移动

   </view>

   <movable-area vtouchmove>

   <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>

   </movable-area>

  </view>

代码示例 5：可超出边界

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   可超出边界

   </view>

   <movable-area>

   <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>

   </movable-area>

   </view>

  </view>

代码示例 6：带有惯性

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   带有惯性

   </view>

   <movable-area>

   <movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>

   </movable-area>

   </view>

  </view>

代码示例 7：可放缩

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   可放缩

   </view>

   <movable-area scale-area="true">

   <movable-view 

   x="{=x=}" 

   y="{=y=}" 

   scale

   scale-min="0.5"

   scale-max="4"

   scale-value="{{scale}}"

   direction="all" 

   animation="false" 

   bindchange="onChange" 

   bindscale="onScale">

   text

   </movable-view>

   </movable-area>

   <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>

   </view>

  </view>

代码示例 8：可悬浮菜单

SWAN
JS


 

  <view class="wrap">

   <movable-area class="movable-area" style="height:{{height/100}}rem">

   <movable-view

   x="0"

   y="0"

   direction="all"

   animation="false"

   scale

   scale-min="0.5"

   scale-max="4">

   </movable-view>

   </movable-area>

  </view>

Bug & Tip

Tip：movable-view 需要在 CSS 中设置 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 必须在组件中，并且必须是直接子节点，否则不能移动。

九八云百度小程序教程：movable-view 可移动视图容器

movable-view 可移动视图容器

属性说明

direction 有效值

示例

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

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

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

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

代码示例 5：可超出边界

代码示例 6：带有惯性

代码示例 7：可放缩

代码示例 8：可悬浮菜单

Bug & Tip

相关推荐

攻防案列

热门文章