最近改了个UI，按钮放哪都不合适，看到别人都是用悬浮按钮，于是我自己也搞了一个，随心所欲存放位置，的确要比固定的好看的多，下面的是一个截图，代码放在下面自取
支持滑动、点击文章来源：https://www.toymoban.com/news/detail-504003.html
完整代码片段：文章来源地址https://www.toymoban.com/news/detail-504003.html
<template>
<view class="float-icon" :style="{right: right + 'px', bottom: bottom + 'px'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<image src="/static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
</view>
</template>
<script>
export default {
data() {
return {
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
right: 20,
bottom: 100,
}
},
methods: {
touchStart(e) {
this.startX = e.touches[0].clientX
this.startY = e.touches[0].clientY
},
touchMove(e) {
this.moveX = e.touches[0].clientX - this.startX
this.moveY = e.touches[0].clientY - this.startY
this.right -= this.moveX
this.bottom -= this.moveY
this.startX = e.touches[0].clientX
this.startY = e.touches[0].clientY
},
touchEnd(e) {
// do something
},
},
}
</script>
<style>
.float-icon {
position: fixed;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #83deff;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
</style>
到了这里，关于uniapp悬浮图标支持拖动支持微信小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
