89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
<route lang="json5">
|
||
{
|
||
layout: 'default',
|
||
style: { navigationBarTitleText: '页面悬浮球' },
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view>
|
||
<movable-area class="movable-area">
|
||
<movable-view
|
||
:style="`--size:${ballSize}px`"
|
||
class="movable-view"
|
||
direction="all"
|
||
:x="x"
|
||
:y="y"
|
||
@change="onChange"
|
||
@touchend.prevent="onTouchEnd"
|
||
>
|
||
<view class="w-full h-full rounded-full bg-green-400"></view>
|
||
</movable-view>
|
||
</movable-area>
|
||
<view>页面其他元素</view>
|
||
<view>可以正常触发点击事件吗？答案是可以的</view>
|
||
<button @click="onClick">按钮</button>
|
||
<view>{{ x }}</view>
|
||
<view>{{ y }}</view>
|
||
<view @click="onSet">点击设置</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="FloatingBubble">
|
||
const { windowHeight, windowWidth } = uni.getSystemInfoSync()
|
||
|
||
const ballSize = 60
|
||
const x = ref(windowWidth - ballSize) // 靠右侧
|
||
const y = ref(windowHeight - ballSize - 20) // 距离底部20px
|
||
|
||
const middleX = (windowWidth - ballSize) / 2
|
||
|
||
const onChange: UniHelper.MovableViewOnChange = (e) => {
|
||
const { x: _x, y: _y } = e.detail
|
||
x.value = _x
|
||
y.value = _y
|
||
}
|
||
// TODO: 期望最终落点不靠左右两边时，会自动回到两边，有一定的动画效果
|
||
const onTouchEnd = (e) => {
|
||
console.log('onTouchEnd', e)
|
||
// TODO：为啥这里设置的不生效了，原生不会移动到设置的地方，onSet里面可以。这里直接执行onSet也不行
|
||
// 这里被我解决了
|
||
const tid = setTimeout(() => {
|
||
if (x.value < middleX) {
|
||
x.value = 0
|
||
} else {
|
||
x.value = windowWidth - ballSize
|
||
}
|
||
clearTimeout(tid)
|
||
}, 0)
|
||
}
|
||
|
||
const onClick = () => {
|
||
uni.showToast({
|
||
title: 'yes',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
const onSet = () => {
|
||
x.value = 100
|
||
y.value = 100
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.movable-area {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none; // 设置area元素不可点击，则事件便会下移至页面下层元素
|
||
.movable-view {
|
||
width: var(--size);
|
||
height: var(--size);
|
||
pointer-events: auto; // 必须设置，否则无法点击
|
||
}
|
||
}
|
||
</style>
|