注册网站后邮箱收到邮件,优质的网站建设流程,云南省建设厅建筑业信息网,启闭机闸门的网站建设uniapp实现全局悬浮框(按钮,页面,图片自行设置) 可拖动 话不多说直接上干货 1,在components新建组件(省去了每个页面都要引用组件的麻烦) 2,实现代码
templateview classcall-plate :styletop: top px;left: left px; touchmovetemplateview classcall-plate :styletop: top px;left: left px; touchmovetouchmove touchendtouchend touchstarttouchstart v-ifpopupShow通话中悬浮框/view
/templatescriptexport 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},}}
/scriptstyle langscss 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,在每个需要用到悬浮框的页面引入
templateview classcontent!--组件引用--call-screen/call-screen/view
/template
发通知控制显示隐藏悬浮框
uni.$emit(that.global.CALL_SHOW_CLOSE)
uni.$emit(that.global.CALL_SHOW_OPEN)4,实现效果 每个页面切换后都会更新最新位置
