uniapp实现全局悬浮框

uniapp实现全局悬浮框(按钮,页面,图片自行设置) 可拖动

话不多说直接上干货

1,在components新建组件(省去了每个页面都要引用组件的麻烦)

2,实现代码

c 复制代码
<template>
	<view class="call-plate" :style="'top:' + top + 'px;left:' + left + 'px;'" @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart" v-if="popupShow">
		通话中悬浮框
	</view>
</template>

<script>
	export default {
		name: "call-screen",
		emits: ["hide", "confirm"],
		props: {
			/**
			 * 默认号码
			 */
			number: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				popupShow: true, // 是否显示当前页面
				top: 0,
				left: 0,
				startTop: 0,
				startLeft: 0,
				startClientTop: 0,
				startClientLeft: 0,
			}
		},
		watch: {
			
		},
		computed: {
			i18n() {
				return this.$t
			}
		},
		created() {
			let that = this
			this.popupShow = getApp().globalData.callShow
			this.top = getApp().globalData.callShowTop // 获取全局存储的位置,也可以使用本地缓存存储
			this.left = getApp().globalData.callShowLeft
			uni.$on(getApp().globalData.$global.CALL_SHOW_UPDATE, this.callShowUpdate)
			uni.$on(getApp().globalData.$global.CALL_SHOW_OPEN, this.callShowOpen)
			uni.$on(getApp().globalData.$global.CALL_SHOW_CLOSE, this.callShowClose)
		},
		destroyed() {
		    // 销毁通知
			uni.$off(getApp().globalData.$global.CALL_SHOW_UPDATE, this.callShowUpdate)
			uni.$off(getApp().globalData.$global.CALL_SHOW_OPEN, this.callShowOpen)
			uni.$off(getApp().globalData.$global.CALL_SHOW_CLOSE, this.callShowClose)
		},
		methods: {
			touchmove(e) {
				// 单指触摸
				if (e.touches.length !== 1) {
					return false;
				}
				// console.log(e)
				this.top = e.changedTouches[0].pageY - this.startClientTop + this.startTop
				this.left = e.changedTouches[0].pageX - this.startClientLeft + this.startLeft
			},
			touchend(e) {
				// console.log("------结束,top:" + this.top + ",left:" + this.left)
				// console.log(e)
				getApp().globalData.callShowTop = this.top
				getApp().globalData.callShowLeft = this.left
				uni.$emit(getApp().globalData.$global.CALL_SHOW_UPDATE) // 更新每个页面悬浮框位置
			},
			touchstart(e) {
				// console.log("------开始")
				// console.log(e)
				this.startTop = this.top
				this.startLeft = this.left
				this.startClientTop = e.changedTouches[0].pageY
				this.startClientLeft = e.changedTouches[0].pageX
			},
			callShowUpdate() {
				// 更新每个页面悬浮框位置
				this.top = getApp().globalData.callShowTop
				this.left = getApp().globalData.callShowLeft
			},
			callShowOpen() {
				// 打开每个页面悬浮框
				this.popupShow = true
				getApp().globalData.callShow = true
			},
			callShowClose() {
				// 关闭每个页面悬浮框
				this.popupShow = false
				getApp().globalData.callShow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.call-plate {
		display: flex;
		position: absolute;
		width: 90px;
		height: 160px;
		z-index: 9999999;
		background-color: yellow;
	}
</style>
c 复制代码
在 App.vue中全局存储悬浮框位置信息
globalData: {
	callShowTop: 100, // 悬浮框top
	callShowLeft: 100, // 悬浮框left
	callShow: false, // 悬浮框是否显示
},

3,在每个需要用到悬浮框的页面引入

c 复制代码
<template>
	<view class="content">
        <!--组件引用-->
		<call-screen></call-screen>
	</view>
</template>
c 复制代码
发通知控制显示隐藏悬浮框
uni.$emit(that.global.CALL_SHOW_CLOSE)
uni.$emit(that.global.CALL_SHOW_OPEN)

4,实现效果

每个页面切换后都会更新最新位置

相关推荐
coding随想6 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我34 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子38 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹42 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控