uniapp小程序中有一个可拖动悬浮窗,但是拖动时页面也会滚动,解决问题并给出完整代码
时间: 2024-02-20 16:00:44 浏览: 106
解决问题的方法是阻止事件冒泡。具体实现可以在悬浮窗的touchmove事件中调用event.stopPropagation()方法,阻止页面滚动事件的触发。
以下是一个简单的uniapp小程序中可拖动悬浮窗的代码实现,包括阻止事件冒泡的功能:
```
<template>
<view>
<view class="container">
<view class="drag-window" :style="{left: posX + 'px', top: posY + 'px'}" @touchmove="onWindowMove($event)">
<text>可拖动悬浮窗</text>
</view>
</view>
<view class="content">
<text>这是一个有滚动条的页面内容</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
posX: 0,
posY: 0,
startX: 0,
startY: 0
}
},
methods: {
onWindowMove(event) {
event.stopPropagation()
let touch = event.touches[0]
this.posX += touch.clientX - this.startX
this.posY += touch.clientY - this.startY
this.startX = touch.clientX
this.startY = touch.clientY
},
onTouchStart(event) {
let touch = event.touches[0]
this.startX = touch.clientX
this.startY = touch.clientY
}
}
}
</script>
<style>
.container {
position: relative;
width: 100%;
height: 300px;
}
.drag-window {
position: absolute;
width: 100px;
height: 50px;
background-color: #f00;
cursor: move;
}
.content {
height: 1000px;
overflow-y: scroll;
}
</style>
```
在悬浮窗的touchmove事件中调用event.stopPropagation()方法,阻止页面滚动事件的触发。同时,悬浮窗的touchmove事件中记录当前的悬浮窗位置,根据手指滑动的距离计算出新的悬浮窗位置。
在模板中,使用@touchmove绑定悬浮窗的touchmove事件,使用:style绑定悬浮窗的位置。同时,使用@touchstart绑定onTouchStart方法,记录手指触摸时的位置。
在样式中,设置页面内容区域的高度为1000px,并使用overflow-y: scroll;实现滚动条的显示。同时,设置悬浮窗的样式,并设置其position为absolute,使其脱离文档流并可以自由拖动。
阅读全文