小程序组件

视图容器-movable-area

时间:2018/12/20 14:10:12  作者:互联网  来源:网络转载  查看:7637  评论:0
内容摘要:movable-area基础库 1.2.0 开始支持,低版本需做兼容处理。movable-view 的可移动区域属性名类型默认值说明最低版本scale-areaBooleanfalse当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改...

movable-area

基础库 1.2.0 开始支持,低版本需做兼容处理。

movable-view 的可移动区域

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

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

movable-view

基础库 1.2.0 开始支持,低版本需做兼容处理。

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

属性名 类型 默认值 说明 最低版本
direction String none movable-view的移动方向,属性值有all、vertical、horizontal、none  
inertia Boolean false movable-view是否带有惯性  
out-of-bounds Boolean false 超过可移动区域后,movable-view是否还可以移动  
x Number / String   定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画  
y Number / String   定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画  
damping Number 20 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快  
friction Number 2 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值  
disabled Boolean false 是否禁用 1.9.90
scale Boolean false 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 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: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData) 1.9.90
bindscale EventHandle   缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale},其中x和y字段在2.1.0之后开始支持返回 1.9.90

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

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

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/>组件中,并且必须是直接子节点,否则不能移动。

示例代码:

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view区域大于movable-area</view>
  <movable-area style="height: 100px; width: 100px; background: red;">
    <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">
    </movable-view>
  </movable-area>
  <view class="section__title">可放缩</view>
  <movable-area style="height: 200px; width: 200px; background: red;" scale-area>
    <movable-view style="height: 50px; width: 50px; background: blue;" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2">
    </movable-view>
  </movable-area>
</view>
Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {
    this.setData({
      x: 30,
      y: 30
    });
  },
  onChange: function(e) {
    console.log(e.detail)
  },
  onScale: function(e) {
    console.log(e.detail)
  }
})


相关文章
    相关评论
    评论者:      验证码:  点击获取验证码
    咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |