美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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

    坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务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

    • SWAN
    • JS
     
 
 
      
  
  
  
      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

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      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：只可以横向移动

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

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

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

    代码示例 5：可超出边界

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

    代码示例 6：带有惯性

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

    代码示例 7：可放缩

    • SWAN
    • JS
     
 
 
      
  
  
  
      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：可悬浮菜单

    • SWAN
    • JS
     
 
 
      
  
  
  
      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://www.zsjierui.cn/article/cddhdjg.html

    其他资讯

    免费获取网站建设与品牌策划方案报价

    *主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上美图齐众。
    提交需求

      联系我们

      028-86922220
    • 手机：13518219792
    • 地址：成都市太升南路288号锦天国际A幢1002号
    • 24小时服务热线：028-86922220

      网站建设服务

    • 网页设计
    • 网站制作
    • 网站开发

      网站推广服务

    • 营销网站建设
    • 百度快速排名
    • 整站网站推广

      网站运维服务

    • 基础维护
    • 网站改版
    • 网站维护

      FOLLOW US

    • 微信二维码

      微信二维码

    友情链接： 成都轻质隔墙板   成都叉车租赁   hzjierui.cn   广告吸塑字   重庆做网站   谷歌推广   名片印刷   广汉网站建设   成都网站推广   成都响应式网站建设   
    Copyright © 2025 资阳站青羊区美图齐众设计工作室（个体工商户） 资阳网站建设公司-选网站建设公司美图齐众！专业的网站制作公司！
    All Rights Reserved 版权所有 蜀ICP备2025119604号-1