1. 程式人生 > 其它 >uniapp 小程式懸浮球效果

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>

好了希望能幫助你。