uniapp 小程序悬浮球效果
之前查资料有很多虚浮球效果,拖动时后面的背景也跟着移动。后来使用@touchmove.stop.prevent修饰符解决问题。
也根据缓存实现了,悬浮球全局调用,位置是前一个页面移动的位置。
<template> <view class="holdon" @touchstart="drag_start" @touchmove.stop.prevent="drag_hmove" @click.capture="toAdUrl"> <image class="ball" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')" :src="imgUrl" 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: 200,//起始y坐标 moveX: 10,//起始X坐标 windowWidth: '', windowHeight: '', imgUrl: "" //img 地址 } }, mounted() { let location = uni.getStorageSync('ball-location'); if (location.x) { this.moveX = location.x } if (location.y) { this.moveY = location.y } const { windowWidth, windowHeight } = uni.getSystemInfoSync(); this.windowWidth = windowWidth this.windowHeight = windowHeight }, methods: { toAdUrl() { }, 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]; let location = { x: this.moveX, y: this.moveY }; //将悬浮球 存缓存 其他页面展示 也在相同位置 uni.setStorageSync('ball-location', location); } } } </script> <style lang="scss" scoped> .holdon { width: 100%; height: 100%; } .ball { width: 120rpx; height: 120rpx; border-radius: 50%; color: #fff; font-size: 30upx; display: flex; justify-content: center; align-items: center; position: fixed !important; z-index: 1000000; } </style>
好了希望能帮助你。