uniapp实现全局悬浮框

uniapp实现全局悬浮框(按钮,页面,图片自行设置) 可拖动
话不多说直接上干货
1,在components新建组件(省去了每个页面都要引用组件的麻烦)

2,实现代码

<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 = thisthis.popupShow = getApp().globalData.callShowthis.top = getApp().globalData.callShowTop // 获取全局存储的位置,也可以使用本地缓存存储this.left = getApp().globalData.callShowLeftuni.$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.startTopthis.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.topgetApp().globalData.callShowLeft = this.leftuni.$emit(getApp().globalData.$global.CALL_SHOW_UPDATE) // 更新每个页面悬浮框位置},touchstart(e) {// console.log("------开始")// console.log(e)this.startTop = this.topthis.startLeft = this.leftthis.startClientTop = e.changedTouches[0].pageYthis.startClientLeft = e.changedTouches[0].pageX},callShowUpdate() {// 更新每个页面悬浮框位置this.top = getApp().globalData.callShowTopthis.left = getApp().globalData.callShowLeft},callShowOpen() {// 打开每个页面悬浮框this.popupShow = truegetApp().globalData.callShow = true},callShowClose() {// 关闭每个页面悬浮框this.popupShow = falsegetApp().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>

在 App.vue中全局存储悬浮框位置信息
globalData: {callShowTop: 100, // 悬浮框topcallShowLeft: 100, // 悬浮框leftcallShow: false, // 悬浮框是否显示
},

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

<template><view class="content"><!--组件引用--><call-screen></call-screen></view>
</template>

发通知控制显示隐藏悬浮框
uni.$emit(that.global.CALL_SHOW_CLOSE)
uni.$emit(that.global.CALL_SHOW_OPEN)

4,实现效果

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