movable-area

movable-view 的可移动区域

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

属性说明

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

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

  • movable-area app-nvue平台 暂不支持手势缩放

movable-view

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

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

属性说明

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

除了基本事件外，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轴方向分开考虑）

Tips

  • movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。
  • 如果遇到x、y、scale属性设置不生效的问题参考：组件属性设置不生效解决办法
  • swiper在非H5端，不支持内嵌video、map等原生组件。更新：微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用示例
  1. <template>
  2.     <view class="page-body">
  3.         <view class="uni-padding-wrap uni-common-mt">
  4.             <view class="uni-title uni-common-mt">
  5.                 示例 1
  6.                 <text>\nmovable-view 区域小于 movable-area</text>
  7.             </view>
  8.             <movable-area>
  9.                 <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
  10.             </movable-area>
  11.             <view @tap="tap" class="uni-link uni-center uni-common-mt">
  12.                 点击这里移动至 (30px, 30px)
  13.             </view>
  14.             <view class="uni-title uni-common-mt">
  15.                 示例 2
  16.                 <text>\nmovable-view区域大于movable-area</text>
  17.             </view>
  18.             <movable-area>
  19.                 <movable-view class="max" direction="all">text</movable-view>
  20.             </movable-area>
  21.         </view>
  22.     </view>
  23. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             x: 0,
  5.             y: 0,
  6.             old: {
  7.                 x: 0,
  8.                 y: 0
  9.             }
  10.         }
  11.     },
  12.     methods: {
  13.         tap: function(e) {
  14.             this.x = this.old.x
  15.             this.y = this.old.y
  16.             this.$nextTick(function() {
  17.                 this.x = 30
  18.                 this.y = 30
  19.             })
  20.         },
  21.         onChange: function(e) {
  22.             this.old.x = e.detail.x
  23.             this.old.y = e.detail.y
  24.         }
  25.     }
  26. }

uni

发现错误？想参与编辑？在 GitHub 上编辑此页面！