VUE 、uni-app 浮动按钮

浮动按钮效果

view 使用position:fixed 相对于整个界面固定位置，根据view的top、left、right、bottom的变化控制元素移动。

<view class="float" @touchstart.stop="contentStartMove"
		 @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" :style="
			  'left:' + cutL + 'px;top:' + cutT + 'px;right:' + cutR + 'px;bottom:' + cutB + 'px'
			 ">

view的touch监听事件说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。 　　

touchend事件：当手指从屏幕上离开的时候触发。

touchmove监听边距变化：

contentStartMove(e) {
				PAGE_X = e.touches[0].pageX;
				PAGE_Y = e.touches[0].pageY;
			},
			// 拖动时候触发的touchMove事件
			contentMoveing(e) {
				var _this = this;
				var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
				var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
				// 左移
				if (dragLengthX > 0) {
					//向左移动，剪裁区域超过了当前图片的左边，判定移动距离，为初始裁剪区域距离左边距
					if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL;
				} else {
					//向右移动，剪裁区域超过了当前图片的右边，判定移动距离，为初始裁剪区域距离右边距
					if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR;
				}
				if (dragLengthY > 0) {
					//向上移动，剪裁区域超过了当前图片的上边，判定移动距离，为初始裁剪区域距离顶部边距
					if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT;
				} else {
					//向下移动，剪裁区域超过了当前图片的底部，判定移动距离，为初始裁剪区域距离底部边距
					if (this.cutB + dragLengthY < 50) dragLengthY = 0;
				}
				this.setData({
					cutL: this.cutL - dragLengthX,
					cutT: this.cutT - dragLengthY,
					cutR: this.cutR + dragLengthX,
					cutB: this.cutB + dragLengthY,
				});
				PAGE_X = e.touches[0].pageX;
				PAGE_Y = e.touches[0].pageY;
			},
			contentTouchEnd() {
               var _this = this;
				 if(PAGE_X>=SCREEN_WIDTH/2){
                 this.cutL=SCREEN_WIDTH-50;
				 this.cutR=0
				 }else{
                   this.cutL=0;
				   this.cutR=SCREEN_WIDTH-50;
				 }
				this.setData({
					cutL: this.cutL,
					cutT: this.cutT,
				});
				PAGE_X = e.touches[0].pageX;
				PAGE_Y = e.touches[0].pageY;

			},