甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：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可移动视图容器
    当前链接：https://chengdu.cdxwcx.cn/article/cddhdjg.html

    其他资讯