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,实现效果

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

相关推荐
一颗松鼠3 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
断墨先生3 分钟前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
小远yyds23 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js