关于uniapp的拖动悬浮球
这两天在做一个项目，有个小模块是悬浮球功能，可以拖动的那种组件也找了，发现组件那个会很卡，而且页面会跟着滚动，球球初始位置也让人很难受
尤其是当我一刷新球球丢了就很蒙，看来那个还是需要完善的
然后我去百度搜了搜，然后找到了解决方法，我判断了下球球初始情况
初始是按百分比定位的，这样对一些大屏设备还是比较友好的，
而且我还精简了下代码
完整的可拖动悬浮球功能如下（可复制直接使用）：
注：如果球球是图片的话，只需要把ball的那个view改成image即可
<template>
<view>
<view class="holdon">
<view 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" mode="aspectFit">
</view>
</view>
</view>
</template>
<script>
export default {
//悬浮球绝对位置百分比，页面刷新会回到这个位置
props: {
x: {
type: Number,
default: 80
},
y: {
type: Number,
default: 50
},
image: {
type: String,
default: ''
}
},
data() {
return {
start: ,
moveY: 0,
moveX: 0,
windowWidth: '',
windowHeight: '',
}
},
onShow() {
//获取系统分辨率
const {
windowWidth,
windowHeight
} = uni.getSystemInfoSync();
this.windowWidth = windowWidth
this.windowHeight = windowHeight
},
methods: {
drag_start(event) {
this.start = event.touches.clientX - event.target.offsetLeft;
this.start = event.touches.clientY - event.target.offsetTop;
},
//判断防止悬浮球被拖出页面
drag_hmove(event) {
let tag = event.touches;
if (tag.clientX < 0) {
tag.clientX = 0
}
if (tag.clientY < 0) {
tag.clientY = 0
}
if (tag.clientX > this.windowWidth) {
tag.clientX = this.windowWidth
}
if (tag.clientY > this.windowHeight) {
tag.clientY = this.windowHeight
}
this.moveX = tag.clientX - this.start;
this.moveY = tag.clientY - this.start;
},
}
}
</script>
<style>
.ball {
width: 100rpx;
height: 100rpx;
background: linear-gradient(to bottom, #F8F8FF, #87CEFA);
border-radius: 50%;
/* 防止页面滚动条或其他事件跟着动 */
position: fixed !important;
z-index: 9999;
}
</style>
文档来源：博客园https://www.cnblogs.com/h-w-b/p/15044123.html
页:
[1]