需求：
1. 每个页面都能自动加上悬浮按钮
2. 可拖拽
3. 点击返回首页
效果图：
方式一：js原生写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let div = document.createElement('div'); let clientWidth = document.documentElement.clientWidth // 获取手机的像素宽度 let clientHeight = document.documentElement.clientHeight// 获取手机的像素高度 div.style.boxShadow = '0px 0px 0px 0.5em #e0e1e9' ; div.style.width = "24px"; div.style.height = "24px"; div.style.left = clientWidth - 50+'px'; console.log("初始位置left"+div.style.left) div.style.top = clientHeight * 0.6+'px'; div.style.zIndex = '100000'; div.style.position= 'fixed'; div.style.background = 'red'; div.style.transition='all 0.3s'; div.style.bottom='436px'; div.style.right= 0; div.style.margin='5px 10px'; div.style.background='rgb(197 203 211)' div.style.borderRadius = '15px'; document.body.appendChild(div); var divattr = document.createAttribute("id"); divattr.value = "float_info"; //把属性id = "float_info"添加到div div.setAttributeNode(divattr); let flag = 0; //标记是拖曳还是点击 var oDiv = document.getElementById('float_info'); oDiv.style.display = 'block'; // 显示元素 oDiv.addEventListener("touchstart", () => { flag = 0; oDiv.style.transition = 'none' }) // 在拖拽的过程中，按钮应该跟随鼠标的移动而移动。 oDiv.addEventListener("touchmove", (e) => { flag=1 console.log('移动中', e) if (e.targetTouches.length === 1) { // 一根手指 e.preventDefault();// 阻止默认的滚动行为 div.style.left = e.targetTouches[0].clientX-20 +'px'//clientX：触摸目标在视口中的x坐标。 div.style.top = e.targetTouches[0].clientY -25 +'px'//clientY：触摸目标在视口中的y坐标。 console.log('移动中', div.style.left) } }) // 拖拽结束以后，重新调整按钮的位置并重新设置过度动画。 oDiv.addEventListener("touchend", () => { // 如果是点击跳转到首页 if(flag==0){ that.$router.push({ path: "/workspaces/views/index/index", }); }else { div.style.transition = 'all 0.3s' console.log('拖拽结束后left', div.style.left) console.log('拖拽结束后top', div.style.top) if ( parseInt(div.style.left)> (document.documentElement.clientWidth / 2)) { div.style.left = document.documentElement.clientWidth -50+'px'; } else { div.style.left = 0+'px' } // 控制其超出屏幕回到原始位置 if ( parseInt(div.style.top)> (document.documentElement.clientHeight)|| parseInt(div.style.top)<0) { div.style.top = document.documentElement.clientHeight* 0.6+'px' } } }) </script> </body> </html>
注：如果想在vue项目中的每个页面都加上悬浮按钮，可用js，写在APP.vue的onLaunch（）函数里
方式二：
1.创建一个FloatingButton.vue的组件
<template> <!-- 子组件 --> <div class="float_button"> <div @click="onBtnClicked" ref="floatButton" class="float_info" :style="{'width': itemWidth + 'px','margin':'5px 10px', 'height': itemHeight + 'px', 'left': left + 'px', 'top': top + 'px'}" > <span class="text">返回首页</span> </div> </div> </template> <script> export default { data() { return { clientWidth: 0, clientHeight: 0, timer: null, currentTop: 0, left: 0, top: 0, itemWidth: 70 , //按钮宽度 isShort: true, itemHeight: 32, // 悬浮按钮高度 gapWidth: 0, // 距离左右两边距离 coefficientHeight: 0.6, // 从上到下距离比例 } }, props: { }, computed: { }, created() { // console.log('屏幕宽度', document.documentElement.clientWidth) // console.log('屏幕高度度', document.documentElement.clientHeight) let type = navigator.userAgent; // console.log('设备', type) this.clientWidth = document.documentElement.clientWidth this.clientHeight = document.documentElement.clientHeight this.left = this.clientWidth - this.itemWidth - this.gapWidth - 20; this.top = this.clientHeight * this.coefficientHeight }, watch: { left(n, o) { } }, methods: { onBtnClicked() { }, handleScrollStart() { console.log('这是啥时候触发呀？ScrollStart') this.timer && clearTimeout(this.timer) this.timer = setTimeout(() => { this.handleScrollEnd() }, 300) this.currentTop = document.documentElement.scrollTop || document.body.scrollTop if (this.left > this.clientWidth / 2) { this.left = this.clientWidth - this.itemWidth / 2 } else { this.left = -this.itemWidth / 2 } }, handleScrollEnd() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop if (scrollTop === this.currentTop) { if (this.left > this.clientWidth / 2) { this.left = this.clientWidth - this.itemWidth - this.gapWidth } else { this.left = this.gapWidth } clearTimeout(this.timer) } }, }, mounted() { this.$nextTick(() => { const floatButton = this.$refs.floatButton floatButton.addEventListener("touchstart", () => { floatButton.style.transition = 'none' }) // 在拖拽的过程中，组件应该跟随手指的移动而移动。 floatButton.addEventListener("touchmove", (e) => { // console.log('移动中', e) if (e.targetTouches.length === 1) { // 一根手指 document.body.addEventListener('touchmove', this.bodyScroll, { passive: false }); //禁止页面滑动 let touch = e.targetTouches[0] this.left = touch.clientX - 20 this.top = touch.clientY - 25 } }) // 拖拽结束以后，重新调整组件的位置并重新设置过度动画。 floatButton.addEventListener("touchend", () => { floatButton.style.transition = 'all 0.3s' console.log('拖拽结束后left', this.left) document.body.removeEventListener('touchmove', this.bodyScroll, { passive: false }); //解除页面禁止滑动 if (this.left > document.documentElement.clientWidth / 2) { this.left = document.documentElement.clientWidth - this.itemWidth - 20; } else { this.left = 0 } }) }) }, beforeDestroy() { // 添加监听页面滚动 window.removeEventListener('scroll', this.handleScrollStart) }, destroyed() { } } </script> <style lang="scss" scoped> .float_button { .float_info { box-shadow: #1666ca; transition: all 0.3s; position: fixed; bottom: 436px; right: 0; margin: 5px 10px; display: flex; flex-flow: row; justify-content: center; align-items: center; z-index: 999; background: #1666ca; background-color: rgba(22, 102, 202, 0.6); border-radius: 10px; cursor: pointer; .text { font-size: 12px; color: #fff; } } } </style>
2.然后在main.js中注册全局组件（这里大家根据自己的实际路径替换）
import FloatingButton from '@/workspaces/tools/FloatingButton.vue'; Vue.component('FloatingButton', FloatingButton)
3.最后在需要这个悬浮按钮的页面模板中用这个组件就可以了
<FloatingButton/>
