移动端、uniapp自定义可拖拽大小弹窗 可拖拽弹窗高度可变化弹窗

//弹窗样式


			
			
				
				
			
			
				添加藏品材料
				
				
			
			
				
				
					
						
					
					
						
							
								藏品材料
							
							
								材料不足
							
						
						
							
						
					
				
			
			
				
					已选择:{{numL}}/{{numLs}}
				
				
				
					{{numL>0?'添加材料':'请选择材料'}}
				
			
		

js //这里默认弹窗高度为640 最高为1080

data(){
	startX: 0, //开始坐标
	startY: 0,
	popheight:'', //弹窗高度
	movebottom:null ,// 保存的向上拖动后的最大高度
	lastheight:null, //触摸结束后的弹窗高度
	show:null,
}
methods:{
	touchstart(e) {
			      //开始触摸时 
			      this.startY = e.changedTouches[0].clientY
			    },
			 touchmove:function(target) {
				let touchMoveY = target.changedTouches[0].clientY  //滑动变化坐标  滑动后的坐标
				 let movestar=Number(this.startY)- Number(touchMoveY)
				
				 if (movestar>0) {
					 if (this.lastheight!=null) {
					 	this.popheight= (this.lastheight+movestar)
					 } else{
					 	this.popheight= (640+movestar)
					 }
					if(this.popheight>1080){
						this.popheight=1080
					}
					this.movebottom=this.popheight
					
				 } else if(movestar<0){
					if (this.lastheight!=null) {
						this.popheight= (this.movebottom+movestar)
					} else{
						this.popheight= (640+movestar)
					}
					if(this.popheight<640){
						this.popheight=640
					}
				 }
				 
			},
			touchend(){
				this.lastheight=this.popheight
			},
}

你可能感兴趣的:(uni-app,javascript,java)