小程序: moveable-area 和 movealbe-view

代码Github地址

一. movable-area

movable-view的可移动区域。

1. 属性说明

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

二. movalbe-view

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

属性	类型	默认值	说明
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
direction	String	none	movable-view的移动方向，属性值有all(横竖都可以移动)、vertical（只能纵向移动）、horizontal（只能横向移动）、none（不可移动）
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	Boolean	false	是否禁用 (如果禁用，movable-view就不可移动了)
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min	Number	0.5	定义缩放倍数最小值
scale-max	Number	10	定义缩放倍数最大值
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10
bindchange	EventHandle		拖动过程中触发的事件，event.detail
bindscale	EventHandle		缩放过程中触发的事件，event.detail

2. 注意点

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

三. 可运行的代码

• wxml

   movable-view区域小于movable-area 
  
    
  

   movable-view区域大于movable-area 
  
    
      可移动的view
    
  

• wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section_title_less {
  font-size: 28rpx;
}

.area_less {
  height: 200px;
  width: 200px;
  background-color: red;
}

.view_less {
  height: 50px;
  width: 50px;
  background-color: yellow;
}

.section_title_more {
  font-size: 28rpx;
  margin-top: 50px;
}

.area_more {
  height: 50px;
  width: 50px;
  background-color: red;
}

.view_more {
  height: 200px;
  width: 200px;
  border-color: green;
  border-width: 2px;
  border

• js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    x: "100px",
    y: "10px"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  change: function (event) {
    // console.log(event);
  },
  scale: function (event) {
    // console.log(event);
  },
  vtouchmove: function (event) {
    console.log("纵向");
  },
  htouchmove: function (event) {
    console.log("横向");
  }
})