uniapp-【movable-area】【movable-view】

• movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域
• 即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围
• movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
• 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轴方向分开考虑）

属性名	类型	默认值	说明	平台差异说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性	微信小程序、支付宝小程序、App、H5、百度小程序
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动	微信小程序、支付宝小程序、App、H5、百度小程序
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	微信小程序、支付宝小程序、App、H5、百度小程序
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	微信小程序、支付宝小程序、App、H5、百度小程序
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	微信小程序、支付宝小程序、App、H5
scale-min	Number	0.5	定义缩放倍数最小值	微信小程序、支付宝小程序、App、H5
scale-max	Number	10	定义缩放倍数最大值	微信小程序、支付宝小程序、App、H5
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	微信小程序、支付宝小程序、App、H5
animation	Boolean	true	是否使用动画	微信小程序、支付宝小程序、App、H5、百度小程序
@change	EventHandle		拖动过程中触发的事件， = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件， = {x: x, y: y, scale: scale}，	微信小程序、App、H5、百度小程序

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

<movable-area>




    <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>





</movable-area>





<view @tap="tap" class="uni-link">




	点击这里移动至 (30px, 30px)




</view>




 




<script>




	export default {



		data() {



			return {



				x: 0,



				y: 0,



				old: {



					x: 0,



					y: 0




				}



			}



		},



		methods: {



			tap: function(e) {



				// 解决view层不同步的问题



				 = 



				 = 



				this.$nextTick(function() {



					 = 30




					 = 30




				})



			},



			onChange: function(e) {



				 = e.detail.x



				 = e.detail.y



			}



		}



	}




</script>




 




<style>




	movable-view {



		display: flex;



		align-items: center;



		justify-content: center;



		height: 150rpx;



		width: 150rpx;



		background-color: #007AFF;



		color: #fff;



	}



 



	movable-area {



		height: 300rpx;



		width: 100%;



		background-color: #D8D8D8;



		overflow: hidden;



	}



 




</style>

<movable-area>




		<movable-view class="max" direction="all">text</movable-view>





</movable-area>




 




<style>




 movable-area {



		height: 300rpx;



		width: 100%;



		background-color: #D8D8D8;



		overflow: hidden;



	}



 



.max {



		width:500rpx;



		height: 500rpx;



	}




</style>

<movable-area>




	<movable-view direction="horizontal">text</movable-view>





</movable-area>

<movable-area>




	<movable-view direction="vertical">text</movable-view>





</movable-area>

<movable-area>




	<movable-view direction="all" out-of-bounds>text</movable-view>





</movable-area>

<movable-area>




    <movable-view direction="all" inertia>text</movable-view>





</movable-area>

 

<movable-area scale-area>




	<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>





</movable-area>





<view @tap="tap2" class="uni-link">




	点击这里放大3倍




</view>





<script>




	export default {



		data() {



			return {



				scale: 2,



				old: {



					scale: 2




				}



			}



		},



		methods: {



			tap2() {



				// 解决view层不同步的问题



				 = 



				 = 



				this.$nextTick(function() {



					 = 3




				})



			},



			onScale: function(e) {



				 = e.detail.scale



			}



		}



	}




</script>