当前位置: 首页 > article >正文

实现悬浮按钮拖动,兼容h5和微信小程序

h5用js写,微信小程序用

代码里面没有完全实现吸附边缘的功能,需要吸附边缘的话还得自己再完善下(h5的吸附边缘是可以的,小程序的还有点问题)

主要功能是:图片上写文字的悬浮按钮,文字使用的是::after实现的,图片就用的u-image标签

(图片和文字,用背景图好像更方便诶,文字就用绝对定位、flex或者是margin)

		<template>
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn" :style="{ left: left + 'px', top: top + 'px' }" @touchstart="handleTouchStart"
				@touchmove.prevent="handleTouchMove" @touchend="handleTouchEnd" @click="clickHandle">
				<u--image src="放自己的图" width="144rpx"
					height="128rpx" class="link"></u--image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<movable-area class="drag-area" style="height:100vh">
				<movable-view direction="all" :x="x" :y="y" :damping="40" @touchend="handleTouchEnd" class="btn"
					@click="clickHandle" :animation="false">
					<u--image src="放自己的图"
						width="144rpx" height="128rpx"></u--image>
				</movable-view>
			</movable-area>
			<!-- #endif -->
		</template>




				left: 0,     // 按钮左侧位置
				top: 0,      // 按钮顶部位置
				startX: 0,   // 触摸起始X坐标
				startY: 0,
				screenWidth: 0,  // 屏幕宽度
				screenHeight: 0, // 屏幕高度
				x: 0,           // X轴位置
				y: 500,           // Y轴位置
				systemInfo: {},  // 系统信息
				btnWidth: 72,    // 按钮宽度(px)
				btnHeight: 64,   // 按钮高度(px)


		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.screenWidth = systemInfo.windowWidth;
			this.screenHeight = systemInfo.windowHeight;
			this.left = this.screenWidth - this.btnWidth - 10;
			this.top = 500;
			this.x = this.screenWidth - this.btnWidth - 10;
			this.y = 500;
		},


			handleTouchStart(e) {
				// 记录触摸起点
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			handleTouchMove(e) {
				if (e.cancelable) e.preventDefault();
				const deltaX = e.touches[0].clientX - this.startX;
				const deltaY = e.touches[0].clientY - this.startY;
				let newLeft = this.left + deltaX;
				let newTop = this.top + deltaY;
				newLeft = Math.max(0, Math.min(newLeft, this.screenWidth - this.btnWidth));
				newTop = Math.max(0, Math.min(newTop, this.screenHeight - this.btnHeight));
				this.left = newLeft;
				this.top = newTop;
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			handleTouchEnd() {
				// this.autoAttachToEdge();
			},
			// 拖动过程中触发
			onDragChange(e) {
				// 实时更新位置
				// this.x = e.detail.x
				// this.y = e.detail.y
			},
			autoAttachToEdge() {
				// 吸附到左侧或右侧
				const midScreen = this.screenWidth / 2;
				if (this.left < midScreen) {
					this.left = 10; // 吸附到左边
				} else {
					this.left = this.screenWidth - this.btnWidth - 10; // 吸附到右边
				}
			},
            // 点击按钮的逻辑
            clickHandle(){}


	.btn {
		position: fixed;
		z-index: 999;
	}
	/* #ifndef MP-WEIXIN */
	.link {
		&::after {
			content: 'XXX';
			font-size: 24px;
			color: #fff;
			position: absolute;
			bottom: 4px;
			left: 0;
			line-height: 34px;
			width: 100%;
			text-align: center;
			z-index: 999;
		}
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.btn ::v-deep .u-image::after {
		content: 'XXX';
		font-size: 24px;
		color: #fff;
		position: absolute;
		bottom: 4px;
		left: 0;
		line-height: 34px;
		width: 100%;
		text-align: center;
		z-index: 999;
	}

	/* #endif */
	/* 拖拽区域必须设置尺寸 */
	.drag-area {
		width: 100%;
		position: fixed;
		pointer-events: none;
		/* 防止遮挡下方内容 */
		z-index: 999;
	}

	/* 可拖拽按钮样式 */
	.btn {
		width: 144rpx;
		height: 128rpx;
		pointer-events: auto;
		/* 允许交互 */
	}

	/* 隐藏movable-view默认边框 */
	movable-view::before {
		display: none;
	}


http://www.kler.cn/a/584715.html

相关文章:

  • 鸿蒙Next开发与实战经验总结
  • 浅显易懂——连接池、分布式系统、微服务等概念
  • C语言之数据结构:理解什么是数据结构和算法(启航)
  • 【每日学点HarmonyOS Next知识】嵌套组件、装饰器报错、迭代列表刷新、单位换算、tabs组件生命周期
  • 思维链医疗编程方法论框架(Discuss V1版)
  • Android集成:表格、文档文字快速录入-表格识别接口
  • 【C++】initializer_list在实际开发中的应用
  • 101.在 Vue 3 + OpenLayers 使用 declutter 避免文字标签重叠
  • 【C】初阶数据结构9 -- 直接插入排序
  • 集合进阶——数据结构
  • 洛谷P10576 [蓝桥杯 2024 国 A] 儿童节快乐
  • React篇之three渲染
  • WebRTC技术在音视频处理上的难点剖析:EasyRTC嵌入式视频通话SDK的优化策略
  • Appium等待机制--强制等待、隐式等待、显式等待
  • 一次 诡异 的 JVM OOM 事故 原创
  • Vue3:组件通信方式
  • 【工具使用】IDEA社区版如何使用JDK原生命令:从IDEA到命令行的开发技巧
  • 完美解决ElementUI中树形结构table勾选问题
  • 商品管理中的“DeepSeek” AI赋能零售品牌释放利润空间
  • Spring Boot 常用注解的分类及简明解释