代码
<template>
<view class="index">
<view @click="toast">页面内容事件触发</view>
<movable-area class="movableArea">
<movable-view :x="x" :y="y" direction="all" change="movableView">
<image src="../../static/3.gif" mode="" class="gif-img" @click="changeGif"></image>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
x:0,
y:0
}
},
onShow(){
uni.getSystemInfo({
success: (res)=> {
this.x = res.windowWidth/1.3
this.y = res.windowHeight-200
}
});
},
methods:{
toast(){
console.log('不会因为层级问题,遮挡页面内容');
},
changeGif(){
console.log('点击了拖拽区域');
},
}
}
</script>
<style scoped lang="scss">
.index{
movable-area{
position: fixed;
left: 0;
top: 0;
z-index: 2;
height: calc(100% - var(--window-bottom));
width: 100%;
background-color: transparent;
overflow: hidden;
pointer-events: none;
}
movable-view{
display: flex;
align-items: center;
justify-content: center;
height: 150rpx;
width: 150rpx;
pointer-events: auto;
}
.gif-img{
height: 150rpx;
width: 150rpx;
}
}
</style>
movable-view可移动的视图容器,完美解决层级问题,这两个属性一定要有。
movable-area:pointer-events: none;
movable-view:pointer-events: auto;