小程序
取消
开发
中文
EN
取消
  • 组件

    • # movable-view

    基础库 1.2.0 开始支持，低版本需做兼容处理。

    微信 Windows 版：支持

    微信 Mac 版：支持

    渲染框架支持情况：WebView

    # 功能描述

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

    # 属性说明

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

    # bindchange 返回的 source 表示产生移动的原因

    值 说明
    touch 拖动
    touch-out-of-bounds 超出移动范围
    out-of-bounds 超出移动范围后的回弹
    friction 惯性
    空字符串 setData

    # Bug & Tip

    1. tip: movable-view 必须设置width和height属性，不设置默认为10px
    2. tip: movable-view 默认为绝对定位，top和left属性为0px
    3. tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）