Vue实现仿iPhone悬浮球

悬浮球插件简单的效果图：
很遗憾，没找到太好的视频转gif的软件，压缩出来的大小超过了限制，就不放图了
可以参考其他人的图，效果一致：

简单实用案例：

<!-- 给定一个初始位置position，插槽中填写想滑动的部分 -->
<xuanfuqiu :position="position"><d-add-button @click="addPigFarm" add-item="猪场"></d-add-button>
</xuanfuqiu>

原理示意图

请结合代码注释来理解

悬浮球插件代码如下：

<template><div><div class="xuanfu" id="moveDiv" :style="position"@mousedown="down" @touchstart="down"@mousemove="move" @touchmove="move"@mouseup="end" @touchend="end"><slot></slot></div></div>
</template><script>
export default {name: "",components: {},props: {// 通过position来设置初始定位position: {type: Object,default: function() {return {top: "32.25rem",left: "18.34375rem"}}},// 通过fixed来禁用自由移动fixed: {type: Boolean,default: false}},data() {return {flags: false,positionTemp: { x: 0, y: 0 },   // 记录手指点击的位置nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',}},watch: {},computed: {},methods: {// 实现移动端拖拽down(){if (this.fixed) {return}this.flags = true;var touch;// 该if判断是用touch还是mouse来移动if (event.touches) {touch = event.touches[0];} else {touch = event;}this.positionTemp.x = touch.clientX;   // 手指点击后的位置this.positionTemp.y = touch.clientY;this.dx = moveDiv.offsetLeft;    // 移动的div元素的位置this.dy = moveDiv.offsetTop;// console.log("moveDiv.offsetLeft", moveDiv.offsetLeft)// console.log("touch.clientX", touch.clientX)},move(){if(this.flags) {var touch ;if(event.touches){touch = event.touches[0];}else {touch = event;}this.nx = touch.clientX - this.positionTemp.x;   // 手指移动的变化量this.ny = touch.clientY - this.positionTemp.y;this.xPum = this.dx + this.nx;   // 移动后，div元素的位置this.yPum = this.dy + this.ny;let windowWidth = document.documentElement.clientWidthlet windowHeight = document.documentElement.clientHeight// console.log("window.clientWidth", windowWidth)// console.log(this.xPum)// console.log(" moveDiv.clientWidth",  moveDiv.clientWidth)if (this.xPum > 0 && (this.xPum + moveDiv.clientWidth < windowWidth)) {// movediv的左右边，未出界moveDiv.style.left = this.xPum + "px";} else if (this.xPum <= 0) {// 左边出界，则左边缘贴边moveDiv.style.left = 0 + "px";} else if (this.xPum + moveDiv.clientWidth >= windowWidth) {// 右边缘出界moveDiv.style.left = (windowWidth - moveDiv.clientWidth) + "px";// console.log("dx", windowWidth - moveDiv.clientWidth)}// 上下未出界if (this.yPum > 0 && (this.yPum + moveDiv.clientHeight < windowHeight)) {moveDiv.style.top = this.yPum +"px";} else if (this.yPum <= 0) {// 上边缘出界moveDiv.style.top = 0 + "px"} else if (this.yPum + moveDiv.clientHeight >= windowHeight) {// 下边缘// console.log("windowHeight:", windowHeight)// console.log("moveDiv.clientHeight:", moveDiv.clientHeight)// console.log(this.yPum + moveDiv.clientHeight)moveDiv.style.top = windowHeight - moveDiv.clientHeight + "px"}// 阻止页面的滑动默认事件，为了只让悬浮球滑动，其他部分不滑动；如果碰到滑动问题，1.2 请注意是否获取到 touchmove, 系统默认passive: true，无法使用preventDefault// document.addEventListener("touchmove", function(){//    event.preventDefault();// }, { passive: false });// document.addEventListener("mousemove", function(){//     event.preventDefault();// }, { passive: false });document.addEventListener("touchmove", this.preventDefault, { passive: false })document.addEventListener("mousemove", this.preventDefault, { passive: false })}},//鼠标释放时候的函数，鼠标释放，移除之前添加的侦听事件，将passive设置为true，不然背景会滑动不了end(){this.flags = false// 注意事项，在添加和删除监听事件时，其function必须是同名的函数，不能为匿名函数。document.removeEventListener('touchmove',this.preventDefault, false)document.removeEventListener('mousemove',this.preventDefault, false)// 下面两句是保证在移除监听事件后，除了悬浮球的部分还能够滑动，如果不添加，则无法滑动document.addEventListener("touchmove", function(e) {window.event.returnValue = true})document.addEventListener("mousemove", function(e) {window.event.returnValue = true})},preventDefault(e) {e.preventDefault()}},created() {},mounted() {}
}
</script><style lang="scss" scoped>
.xuanfu {/* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/z-index: 999;position: fixed; // 这里的定位方式有待考量，fixed的话存在未知设置不合理，跑出屏幕不显示的问题
}
</style>

Vue实现仿iPhone悬浮球相关推荐

android悬浮球代码,Android 仿360悬浮球与加速球
先来看一张动态图昨天跟着视频学了如何自定义View并做成仿360悬浮球与加速球的样式可以看出来,做成的效果有: 点击按钮后退出Activity,呈现一个圆形的悬浮球,可以随意拖动并会自动依靠到屏幕 ...
android 悬浮球动画,Android 仿360悬浮球与加速球
先来看一张动态图昨天跟着视频学了如何自定义View并做成仿360悬浮球与加速球的样式可以看出来,做成的效果有: 点击按钮后退出Activity,呈现一个圆形的悬浮球,可以随意拖动并会自动依靠到屏幕 ...
通过Java高仿flyme悬浮球设计
资源下载地址:https://download.csdn.net/download/sheziqiong/85796297 资源下载地址:https://download.csdn.net/downl ...
iphone悬浮球怎么设置_OPPO手机怎么截屏？大部分的人只会两种，包括你吗？
OPPO手机怎么截屏?我相信99%的人都知道,但是OPPO手机所有截屏方式都知道的人,肯定少之又少.别不承认,大部分人都不是专业玩手机的,所以不知道也是再正常不过的事.小编今天就把目前OPPO手机所有 ...
Qt 仿360悬浮球
功能: 1,常规自定义拖动时间 2,异形窗体 3,鼠标进出区域 4,自定义右键菜单 5,自动贴边以及防止拖拽出屏幕区域下载路径:https://download.csdn.net/download/ ...
C# 仿360悬浮球开发demo程序
https://files.cnblogs.com/files/wohexiaocai/%E4%BB%BF360%E5%8A%A0%E9%80%9F%E5%99%A8.zip
苹果悬浮球_买了一万块钱的苹果手机，悬浮球功能不会用？真的可惜了
苹果手机悬浮球就是大家俗称的"小白点"功能,虽然说现在是全面屏时代,大多数人都习惯了虚拟按键进行操作.也有很多快捷键功能. 但是iPhone手机小白点作为苹果手机经典功能之一,很多 ...
苹果悬浮球_谁说苹果手机的悬浮球不好用的！那是你没有了解它的真正用法
许多人都说悬浮球显示在桌面上很丑,而且也没有什么作用,其实不然,手机悬浮球还是挺实用的,不然这么多年也不可能一直存在,比如iPhone上面悬浮球,这么多年,小编一直都很喜欢用. 今天小编就来谈谈悬浮球 ...
html防微信音乐,web高仿樊登H5/微信音乐播放悬浮球效果
这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果,这个效果跟微信音乐播放悬浮球的效果也很相似,今天总结一下实现的思路过程(基于 Vue 实现). 先来看看樊登 H5 的效果. 再来看看我的实现,挺完 ...

Vue实现仿iPhone悬浮球

Vue实现仿iPhone悬浮球

简单实用案例：

原理示意图

悬浮球插件代码如下：

Vue实现仿iPhone悬浮球相关推荐

最新文章

热门文章