创新互联百度小程序教程：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.shufengxianlan.com/qtweb/news32/141232.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    搜索引擎优化知识

    行业网站建设

    成都网站建设　　 　温江网站建设　　 　重庆网站建设公司　　 　成都网站优化　　 　东方电机技改　　 　网站改版　　 　B2C电商系统　　 　软文营销　　 　深圳纱窗安装　　 　成都seo优化　　 　软文营销　　 　绵阳托管服务器　　 　app制作　　 　医药医疗网站建设方案　　 　微信开发　　 　德阳网站建设　　 　小程序开发　　 　品牌网站建设公司　　 　软文发布平台　　 　迷你发光字