uni-app拖拽悬浮球优化

谁践踏了优雅 2023-06-27 05:54 19阅读 0赞

使用uni-app拖拽悬浮球，插件不错 ，插件地址 [https://ext.dcloud.net.cn/plugin?id=514][https_ext.dcloud.net.cn_plugin_id_514]

插件挺不错的，有几点需求我改了下  
1、背景图片保持纵横比缩放图片，使用aspectFit好点  
2、初始化球位置时使用%比较符合实际，如果放到右底部使用px还要适配  
3、拖拽超出边框没有做限制。

<template>
    	<view class="holdon" >
    		<image  class="ball" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"	 
    				@touchstart="drag_start" @touchmove.prevent="drag_hmove" :src="image"  mode="aspectFit">
    		</image>
    	</view>
    </template>
    
    <script>
    	export default {
    		props: {
    			x: {
    				type: Number,
    				default:0
    			},
    			y: {
    				type: Number,
    				default:0
    			},
    			image:{
    				type:String,
    				default: ''
    			}
    		},
    		data() {
    			return {
    				start:[0,0],
    				moveY:0,
    				moveX:0,
    				windowWidth:'',
    				windowHeight:'',
    			}
    		},
    		mounted() {
    			const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
    			this.windowWidth = windowWidth
    			this.windowHeight = windowHeight
    		},
    		methods: {
    			drag_start(event){
    				this.start[0]= event.touches[0].clientX-event.target.offsetLeft;
    				this.start[1]= event.touches[0].clientY-event.target.offsetTop;
    			},
    			drag_hmove(event){
    					let	 tag 	 = event.touches;
    					if(tag[0].clientX < 0 ){
    						tag[0].clientX = 0
    					}
    					if(tag[0].clientY < 0 ){
    						tag[0].clientY = 0
    					}
    					if(tag[0].clientX > this.windowWidth ){
    						tag[0].clientX = this.windowWidth
    					}
    					if(tag[0].clientY > this.windowHeight ){
    						tag[0].clientY = this.windowHeight
    					}
    					this.moveX	 = tag[0].clientX-this.start[0];
    					this.moveY	 = tag[0].clientY-this.start[1];
    			}
    		}}
    </script>
    
    <style lang="less">
    	.holdon{
    		width: 100%;
    		height: 100%;
    	}
    	.ball{
    		width: 70upx;height: 70upx;
    		background:linear-gradient(to bottom, #F8F8FF,#87CEFA);
    		border-radius: 50%;
    		box-shadow: 0 0 15upx #87CEFA;
    		color: #fff;
    		font-size: 30upx;
    		display: flex;justify-content: center;align-items: center;
    		position: fixed !important;
    		z-index: 1000000;
    	}
    </style>

![20200104104233294.gif][]

再次感谢作者插件

源码地址：[https://github.com/lpz1096/some\_code/tree/master/drag-ball][https_github.com_lpz1096_some_code_tree_master_drag-ball]

[https_ext.dcloud.net.cn_plugin_id_514]: https://ext.dcloud.net.cn/plugin?id=514
[20200104104233294.gif]: https://img-blog.csdnimg.cn/20200104104233294.gif
[https_github.com_lpz1096_some_code_tree_master_drag-ball]: https://github.com/lpz1096/some_code/tree/master/drag-ball