vue h5项目页面滑块实现
1.template部分
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- 浮窗 -->
<div id="webId">
<div
class="xuanfu"
ref="moveDiv"
@mousedown="down()"
@touchstart="down()"
@mousemove="move()"
@touchmove="move()"
@mouseup="end()"
@touchend="end()"
></div>
</div>
</div>
</template>
2.script部分
<script>
export default {
data() {
return {
flags: false,
position: { x: 0, y: 0 },
nx: "",
ny: "",
dx: "",
dy: "",
xPum: "",
yPum: "",
};
},
methods: {
// 实现移动端拖拽
down() {
this.flags = true;
let touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = this.$refs.moveDiv.offsetLeft;
this.dy = this.$refs.moveDiv.offsetTop;
},
move() {
this.$refs.moveDiv.style.transitionDuration = "0s";
if (this.flags) {
let touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx + this.nx;
this.yPum = this.dy + this.ny;
//添加限制:只允许在屏幕内拖动
const maxWidth = document.documentElement.clientWidth - 80; //屏幕宽度减去悬浮框宽
const maxHeight = document.documentElement.clientHeight - 180; //屏幕高度减去悬浮框高
if (this.xPum < 0) {
//屏幕x限制
this.xPum = 0;
} else if (this.xPum > maxWidth) {
this.xPum = maxWidth;
}
if (this.yPum < 0) {
//屏幕y限制
this.yPum = 0;
} else if (this.yPum > maxHeight) {
this.yPum = maxHeight;
}
this.$refs.moveDiv.style.left = this.xPum + "px";
this.$refs.moveDiv.style.top = this.yPum + "px";
//阻止页面的滑动默认事件
document.addEventListener(
"touchmove",
function () {
event.stopPropagation();
},
false
);
}
},
// 鼠标释放时候的函数
end() {
// console.log("释放");
this.flags = false;
// 获取屏幕的可视宽高
let seeWidth = document.documentElement.clientWidth;
// let seeHeight = document.documentElement.clientHeight;
// console.log("seeWidth", seeWidth);
// console.log("seeHeight", seeHeight);
// 获取当前div距屏幕上面和左边的距离
// console.log(this.$refs.moveDiv.offsetTop);
// console.log(this.$refs.moveDiv.offsetLeft);
// 可视屏幕宽度的1/2
let halfwidth = seeWidth / 2;
if (this.$refs.moveDiv.offsetLeft + 40 >= halfwidth) {
this.$refs.moveDiv.style.left = seeWidth - 105 + "px";
this.$refs.moveDiv.style.transitionDuration = "0.5s";
} else {
this.$refs.moveDiv.style.left = 25 + "px";
this.$refs.moveDiv.style.transitionDuration = "0.5s";
}
},
},
};
</script>
3.style部分
<style lang="less" scoped>
/*css样式可自定义 仅提供参考*/
#webId {
position: relative;
}
.xuanfu {
height: 80px; /* rem = 12px */
width: 80px;
z-index: 900;
position: fixed;
top: 500px;
right: 25px;
background-image: url("../assets/618.png");
background-repeat: no-repeat;
background-size: 100% 100%;
touch-action: none;
}
</style>