uniapp移动端悬浮按钮(吸附边缘)
2023-12-13 10:36:39
Uniapp移动端悬浮按钮可以通过CSS实现吸附边缘的效果。具体实现步骤如下:
html:
<movable-area class="movable-area">
<movable-view class="movable-view" :position="position" :x="x" :y="y" :direction="direction"
:damping="damping" @change="onChange" @touchend="onTouchend" @click="record">
<image :src="url+'/uploads/20231209/45a4381a8d120d73e310d10ad5aadc41.png'" mode="widthFix"
class="iconImage"></image>
</movable-view>
</movable-area>
js:
export default {
data() {
return {
x: 364, //x坐标
y: 700, //y坐标
x1: 0,
x2: 0,
y1: 0,
y2: 0,
move: {
x: 0,
y: 0
}
}
},
onLoad() {
},
props: {
damping: {
type: Number,
default: 10
},
direction: {
type: String,
default: "all"
},
position: {
type: Number,
default: 4
},
},
mounted() {
uni.getSystemInfo({
success: (res) => {
this.x1 = 0;
this.x2 = parseInt(res.windowWidth) - 50;
this.y1 = 0;
this.y2 = parseInt(res.windowHeight) - 20;
setTimeout(() => {
if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
this.move.x = this.x;
this.move.y = this.y;
}, 1000)
}
})
},
methods: {
onChange(e) {
if (e.detail.source == "touch") {
this.move.x = e.detail.x;
this.move.y = e.detail.y;
}
},
onTouchend() {
this.x = this.move.x;
this.y = this.move.y;
setTimeout(() => {
if (this.move.x < this.x2 / 2) this.x = this.x1;
else this.x = this.x2;
console.log(this.x, this.y)
}, 100)
}
}
css:
.iconImage {
?? ??? ?display: block;
?? ??? ?width: 120rpx;
?? ??? ?height: 120rpx;
?? ??? ?animation: iconImage 5s linear infinite;
?? ?}
?? ?@keyframes iconImage {
?? ??? ?0% {
?? ??? ??? ?-webkit-transform: rotate(0deg);
?? ??? ?}
?? ??? ?25% {
?? ??? ??? ?-webkit-transform: rotate(90deg);
?? ??? ?}
?? ??? ?50% {
?? ??? ??? ?-webkit-transform: rotate(180deg);
?? ??? ?}
?? ??? ?75% {
?? ??? ??? ?-webkit-transform: rotate(270deg);
?? ??? ?}
?? ??? ?100% {
?? ??? ??? ?-webkit-transform: rotate(360deg);
?? ??? ?}
?? ?}
?? ?.contact {
?? ??? ?width: 50px;
?? ??? ?height: 50px;
?? ??? ?overflow: hidden;
?? ??? ?position: absolute;
?? ??? ?left: 0px;
?? ??? ?top: 0px;
?? ??? ?border-radius: 100%;
?? ??? ?opacity: 0;
?? ?}
?? ?.movable-area {
?? ??? ?height: 100vh;
?? ??? ?width: 750rpx;
?? ??? ?top: 0;
?? ??? ?position: fixed;
?? ??? ?pointer-events: none;
?? ??? ?z-index: 9999999;
?? ?}
?? ?.movable-view {
?? ??? ?width: 96rpx;
?? ??? ?height: 96rpx;
?? ??? ?background-color: #2561EF;
?? ??? ?border-radius: 50%;
?? ??? ?pointer-events: auto;
?? ??? ?position: relative;
?? ??? ?z-index: 9999999;
?? ??? ?display: flex;
?? ??? ?align-items: center;
?? ??? ?justify-content: center;
?? ?}
?? ?.movable-view image {
?? ??? ?width: 50rpx;
?? ??? ?height: 50rpx;
?? ?}
文章来源:https://blog.csdn.net/m0_72603435/article/details/134903912
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!