后浪云|香港服务器

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

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

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

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description border-bottom">
      4. 
  
  
  
    4.  movable-view区域大于movable-area
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <movable-area>
      7. 
  
  
  
    7.  <!-- 添加大于movable-area的class -->
      8. 
  
  
  
    8.  <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>
      9. 
  
  
  
    9.  </movable-area>
      10. 
  
  
  
    10.  </view>
      11. 
  
  
  
    11. </view>
      12.

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

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="card-area">
      2. 
  
  
  
    2.  <view class="top-description border-bottom">
      3. 
  
  
  
    3.  只可以横向移动
      4. 
  
  
  
    4.  </view>
      5. 
  
  
  
    5.  <movable-area htouchmove>
      6. 
  
  
  
    6.  <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>
      7. 
  
  
  
    7.  </movable-area>
      8. 
  
  
  
    8. </view>
      9.

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

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="card-area">
      2. 
  
  
  
    2.  <view class="top-description border-bottom">
      3. 
  
  
  
    3.  只可以纵向移动
      4. 
  
  
  
    4.  </view>
      5. 
  
  
  
    5.  <movable-area vtouchmove>
      6. 
  
  
  
    6.  <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>
      7. 
  
  
  
    7.  </movable-area>
      8. 
  
  
  
    8. </view>
      9.

    代码示例 5：可超出边界

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description border-bottom">
      4. 
  
  
  
    4.  可超出边界
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <movable-area>
      7. 
  
  
  
    7.  <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>
      8. 
  
  
  
    8.  </movable-area>
      9. 
  
  
  
    9.  </view>
      10. 
  
  
  
    10. </view>
      11.

    代码示例 6：带有惯性

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description border-bottom">
      4. 
  
  
  
    4.  带有惯性
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <movable-area>
      7. 
  
  
  
    7.  <movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>
      8. 
  
  
  
    8.  </movable-area>
      9. 
  
  
  
    9.  </view>
      10. 
  
  
  
    10. </view>
      11.

    代码示例 7：可放缩

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description border-bottom">
      4. 
  
  
  
    4.  可放缩
      5. 
  
  
  
    5.  </view>
      6. 
  
  
  
    6.  <movable-area scale-area="true">
      7. 
  
  
  
    7.  <movable-view 
      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.  </movable-view>
      20. 
  
  
  
    20.  </movable-area>
      21. 
  
  
  
    21.  <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>
      22. 
  
  
  
    22.  </view>
      23. 
  
  
  
    23. </view>
      24.

    代码示例 8：可悬浮菜单

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <movable-area class="movable-area" style="height:{{height/100}}rem">
      3. 
  
  
  
    3.  <movable-view
      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.  </movable-view>
      12. 
  
  
  
    12.  </movable-area>
      13. 
  
  
  
    13. </view>
      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 必须在组件中，并且必须是直接子节点，否则不能移动。
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186159/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    相关推荐
    后浪云小程序云教程：云开发 云开发能力
    后浪云Knockout教程：第十章：更多信息（完结篇）
    后浪云Flutter教程：Flutter 布局方法
    后浪云小程序云教程：云开发 HTTP处理
    后浪云小程序云教程：云开发 CloudBase CLI
    后浪云UNI-APP教程：其他项目转 uni-app
    后浪云小程序云教程：云开发 链接与图片
    后浪云SDK教程：第九章 Manifest文件
    后浪云React教程：在设备上运行(Android)
    后浪云百度小程序教程：grid 宫格
    后浪云百度小程序教程：CanvasContext.setMiterLimit
    后浪云小程序教程：微信小程序API 视频解码器·VideoDecoder实例
    后浪云小程序教程：微信小程序 WeUI·导航组件
    后浪云百度小程序教程：CanvasContext.lineTo
    后浪云百度小程序教程：二维码短链
    后浪云小程序教程：微信小程序云开发 API云函数
    友情链接：USA VPSVPS.DO
    Copyright © 2008 - 2025 后浪云 版权所有
    Internet Data Corporation | 网络数据集团（美国）