《微信小程序开发从入门到实战》学习九十四

7.1 视图容器组件

7.1.4 movable-view和movable-area组件

movable-view是一个可移动的视图容器,它需要与movable-area组件结合使用。movabke-view只能放在movable-area组件中,在movable-area组件的范围内拖曳滑动。

movable-view组件属性如下:

属性 类型 默认值 说明 最低版本
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 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围内;改变x的值会触发动画  1.2.0
y number 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围内;改变y的值会触发动画  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 是否支持双指缩放 1.9.90
scale-min number 0.5 定义缩放倍数最小值 1.9.90
scale-max number 10 定义缩放倍数最大值 1.9.90
scale-value number 1 定义缩放倍数,取值范围为 0.5 - 10 1.9.90
animation boolean true 是否使用动画 2.1.0
bindchange eventhandle

拖动过程中触发的事件,event.detail = {x, y, source},

source表示产生移动的原因,可能值如下:

touch:拖动

touch-out-og-bound:超出移动范围

out-of-bounds:超出移动范围后的回弹

friction:惯性

空字符串:setData设置了位置

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

相关推荐

  1. 程序开发入门实战学习

    2024-01-27 20:36:02       40 阅读
  2. 程序开发入门实战学习

    2024-01-27 20:36:02       36 阅读
  3. 程序开发入门实战学习

    2024-01-27 20:36:02       33 阅读
  4. 程序开发入门实战学习

    2024-01-27 20:36:02       33 阅读
  5. 程序开发入门实战学习

    2024-01-27 20:36:02       35 阅读
  6. 程序开发入门实战学习

    2024-01-27 20:36:02       39 阅读
  7. 程序开发入门实战学习

    2024-01-27 20:36:02       30 阅读
  8. 程序开发入门实战学习

    2024-01-27 20:36:02       41 阅读
  9. 程序开发入门实战学习

    2024-01-27 20:36:02       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-27 20:36:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-27 20:36:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-27 20:36:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-27 20:36:02       20 阅读

热门阅读

  1. Spring Security Reactive

    2024-01-27 20:36:02       36 阅读
  2. 【Ubuntu】windows离线安装WSL2

    2024-01-27 20:36:02       28 阅读
  3. 讲清楚浅拷贝和深拷贝

    2024-01-27 20:36:02       39 阅读
  4. Day46 动态规划part08 139.单词拆分 多重背包

    2024-01-27 20:36:02       37 阅读
  5. SpringBoot 基础概念:注册BeanDefinition

    2024-01-27 20:36:02       45 阅读
  6. 低代码助力企业转型可视化

    2024-01-27 20:36:02       38 阅读
  7. hbase shell行键过滤正则匹配

    2024-01-27 20:36:02       33 阅读
  8. Android创建保存Excel文件

    2024-01-27 20:36:02       33 阅读