×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：movable-view可移动视图容器

movable-view 可移动视图容器

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

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都门帘小微创业公司专业提供成都企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

属性说明

属性名 类型 默认值 必填 说明

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

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  movable-view区域小于movable-area
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  text
    8.   
  
  
  8.   
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
    12.

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

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  movable-view区域大于movable-area
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  text
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
    12.

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

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  只可以横向移动
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  text
    7.   
  
  
  7.  
    8.   
  
  
    9.

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

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  只可以纵向移动
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  text
    7.   
  
  
  7.  
    8.   
  
  
    9.

代码示例 5：可超出边界

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  可超出边界
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  text
    8.   
  
  
  8.  
    9.   
  
  
  9.  
    10.   
  
  
    11.

代码示例 6：带有惯性

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  带有惯性
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  text
    8.   
  
  
  8.  
    9.   
  
  
  9.  
    10.   
  
  
    11.

代码示例 7：可放缩

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  可放缩
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  x="{=x=}" 
    9.   
  
  
  9.  y="{=y=}" 
    10.   
  
  
  10.  scale
    11.   
  
  
  11.  scale-min="0.5"
    12.   
  
  
  12.  scale-max="4"
    13.   
  
  
  13.  scale-value="{{scale}}"
    14.   
  
  
  14.  direction="all" 
    15.   
  
  
  15.  animation="false" 
    16.   
  
  
  16.  bindchange="onChange" 
    17.   
  
  
  17.  bindscale="onScale">
    18.   
  
  
  18.  text
    19.   
  
  
  19.  
    20.   
  
  
  20.  
    21.   
  
  
  21.  
    22.   
  
  
  22.  
    23.   
  
  
    24.

代码示例 8：可悬浮菜单

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  x="0"
    5.   
  
  
  5.  y="0"
    6.   
  
  
  6.  direction="all"
    7.   
  
  
  7.  animation="false"
    8.   
  
  
  8.  scale
    9.   
  
  
  9.  scale-min="0.5"
    10.   
  
  
  10.  scale-max="4">
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.   
  
  
    14.

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可移动视图容器
本文路径：http://cdbrznjsb.com/article/cddhdjg.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务