movable-area

movable-view 可移动区域

属性名类型默认值说明
scale-areaBooleanfalse当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

使用竖向滚动时，需要给<scroll-view/>一个固定高度，可通过 JXSS 设置 height。

注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px

movable-view

可移动的视图容器，在页面中可以拖拽滑动

属性名类型默认值说明
directionStringnonemovable-view的移动方向，属性值有all、vertical、horizontal、none
inertiaBooleanfalsemovable-view是否带有惯性
out-of-boundsBooleanfalse超过可移动区域后，movable-view是否还可以移动
xNumber / String定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
yNumber / String定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
dampingNumber20阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
frictionNumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabledBooleanfalse是否禁用
scaleBooleanfalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-minNumber0.5定义缩放倍数最小值
scale-maxNumber10定义缩放倍数最大值
scale-valueNumber1定义缩放倍数，取值范围为 0.5 - 10
animationBooleantrue是否使用动画
bindchangeEventHandle拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
bindscaleEventHandle缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}

除了基本事件外，movable-view 提供了两个特殊事件

类型触发条件
htouchmove初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch

注意

  • movable-view 必须设置 width 和 height 属性，不设置默认为 10px
  • movable-view 默认为绝对定位，top 和 left 属性为 0px
  • 当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内；当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）
  • movable-view必须在 <movable-area/> 组件中，并且必须是直接子节点，否则不能移动。
示例代码

  1. <!--movable-area.jxml-->
  2.  <movable-area scale-area="{{scaleArea}}">
  3.       <view >
  4.         <movable-view
  5.           direction="all"
  6.           x="{{x}}"
  7.           y="{{y}}"
  8.         ><text>拖我移动</text>
  10.         </movable-view>
  11.       </view>
  12.   </movable-area>
  1. //movable-area.js
  2. Page({
  3.   data: {
  4.     x: 0,
  5.     y: 0
  6.   },
  7.   tap: function(e) {
  8.     this.setData({
  9.       x: 100,
  10.       y: 100
  11.     });
  12.   },
  13.   onChange: function(e) {
  14.     console.log(e.detail)
  15.   },
  16.   onScale: function(e) {
  17.     console.log(e.detail)
  18.   }
  19. })

movable-area - 图1