小程序 movable-view可拖动组件

灰太狼 2021-07-25 01:44 606阅读 0赞

可拖动组件:
    	<movable-area
    		scale-area 	当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area
    	>
    		<movable-view
    			1.可移动的视图容器,在页面中可以拖拽滑动,movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动
    			2.必须设置width和height属性,不设置默认为10px
    			3.movable-view默认为绝对定位,初始top和left属性为0px
    			
    			direction		movable-view的移动方向，属性值有all、vertical、horizontal、none 	
    			inertia			movable-view是否带有惯性 	
    			out-of-bounds	超过可移动区域后,movable-view是否还可以移动,只能超出一点,并非全屏
    			x				定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围；改变x的值会触发动画；单位支持px(默认)、rpx
    			y 				定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围；改变y的值会触发动画；单位支持px(默认)、rpx	
    			damping 		20,阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 	1.2.0
    			friction 		2,摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止,必须大于0,否则会被设置成默认值
    			disabled		是否禁用
    			scale			是否支持双指缩放,默认缩放手势生效区域是在movable-view内
    			scale-min 		0.5,定义缩放倍数最小值
    			scale-max 		10,定义缩放倍数最大值
    			scale-value 	1,定义缩放倍数,取值范围为0.5-10
    			animation		是否使用动画
    			bindchange 		拖动过程中触发的事件,额外event.detail = {x, y, source}
    				source:表示产生移动的原因
    					1.touch:拖动
    					2.touch-out-of-bounds:超出移动范围
    					3.out-of-bounds:超出移动范围后的回弹
    					4.friction:惯性
    					5.空字符串:setData
    			bindscale 		缩放过程中触发的事件,额外event.detail = {x, y, scale}
    			htouchmove 		初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch
    				如:bind/catch/...:htouchmove
    			vtouchmove		初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch
    
    			
    		>
    		...
    		</movable-view>
    	</movable-area>

代码示例:

<movable-area
        class='mbox'
      >
        <movable-view
          class="m-bar"
          direction="all"
          inertia
          out-of-bounds
          scale
          x="100rpx"
          bind:htouchmove="enTop"
        >
          <view>移动bar</view>
        </movable-view>
      </movable-area>