当前位置：首页 > news >正文

uniapp移动端悬浮按钮（吸附边缘）

news 来源：原创 2024/9/30 3:32:08

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;}