編寫floatButton組件兄朋，主要代碼如下
<template>
<view>
<view class="float-button"
:style="{
left: safeLeft,
top: safeTop,
width: width + 'px',
height: height + 'px',
'transition': isMove ? 'none' : 'all .2s',
'display': isShow ? 'block' : 'none'
}"
@touchstart.prevent.stop="dragStart"
@touchmove.prevent.stop="dragMove"
@touchend.prevent.stop="dragStop"
:animation="animation">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props: {
// 距離左邊的百分比
x: {
type: Number,
default: 0
},
// 距離右邊的百分比
y: {
type: Number,
default: 0
},
// 寬度
width: {
type: Number,
default: 50
},
// 高度
height: {
type: Number,
default: 50
},
// 離頁面邊上的距離
padding: {
type: Number,
default: 10
}
},
data () {
return {
isShow: false,
isMove: false,
start: [0, 0],
moveY: null,
moveX: null,
windowWidth: null,
windowHeight: null,
animation: {},
timeout: null
}
},
computed: {
safeLeft () {
let maxX = this.windowWidth - this.width - this.padding
let minX = this.padding
if (this.moveX == null) {
let safeX = (this.x / 100) * this.windowWidth
return safeX > maxX ? maxX + 'px' : (safeX < minX) ? minX + 'px' : safeX + 'px'
}
return this.moveX > maxX ? maxX + 'px' : (this.moveX < minX) ? minX + 'px' : this.moveX + 'px'
},
safeTop () {
let maxY = this.windowHeight - this.height - this.padding
let minY = this.padding
if (this.moveY == null) {
let safeY = (this.y / 100) * this.windowHeight
return safeY > maxY ? maxY + 'px' : (safeY < minY) ? minY + 'px' : safeY + 'px'
}
return this.moveY > maxY ? maxY + 'px' : (this.moveY < minY) ? minY + 'px' : this.moveY + 'px'
}
},
mounted () {
const {
windowWidth,
windowHeight
} = uni.getSystemInfoSync()
this.windowWidth = windowWidth
this.windowHeight = windowHeight
this.$nextTick(() => {
this.isShow = true
})
},
methods: {
dragStart(event) {
this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
this.start[1] = event.touches[0].clientY - event.target.offsetTop;
},
//判斷防止懸浮球被拖出頁面
dragMove(event) {
this.isMove = true
const touch = event.touches[0] || event.changedTouches[0]
this.moveX = touch.clientX - this.start[0]
this.moveY = touch.clientY - this.start[1]
},
dragStop (event) {
// 判斷在左側(cè)還是右側(cè)
if (this.isMove) {
this.isMove = false
if (this.moveX > this.windowWidth / 2) {
this.moveX = this.windowWidth - this.width - this.padding
} else {
this.moveX = 0
}
} else {
this.$emit('click')
}
}
}
}
</script>
<style lang="scss" scoped>
.float-button{
position: fixed;
z-index: 999;
transition: all .2s;
}
</style>
使用
<floatButton :width="40" :height="40" :x="90" :y="90" @click="clickFun">
// 這里放置需要的內(nèi)容
</floatButton>
效果如圖所示
image.png
