87 lines
2.7 KiB
Vue
87 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="continueFloat">
|
||
|
|
<view class="jiantou" @click="toGo">首页→</view>
|
||
|
|
<!-- <text style="font-size: 0.8rem;color: darkslategrey;text-align: center;">首页</text> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import $ from "@/static/js/jquery-3.6.4.min.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mounted() {
|
||
|
|
var idom = document.getElementsByClassName("continueFloat");
|
||
|
|
var contW = $(idom).width();
|
||
|
|
var contH = $(idom).height();
|
||
|
|
var startX, startY, sX, sY, moveX, moveY, leftX, rightX, topY, bottomY;
|
||
|
|
var winW = $(window).width();
|
||
|
|
var winH = $(window).height();
|
||
|
|
$(idom).on({ //绑定事件
|
||
|
|
touchstart: function(e) {
|
||
|
|
startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标
|
||
|
|
startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
|
||
|
|
sX = $(idom).offset().left; //相对于当前窗口X轴的偏移量
|
||
|
|
sY = $(idom).offset().top; //相对于当前窗口Y轴的偏移量
|
||
|
|
leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
|
||
|
|
rightX = winW - contW + leftX; //鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
|
||
|
|
topY = startY - sY; //鼠标所能移动最上端是当前鼠标距div上边距的位置
|
||
|
|
bottomY = winH - contH + topY; //鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置
|
||
|
|
},
|
||
|
|
touchmove: function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
//移动过程中XY轴的坐标要减去margin的距离
|
||
|
|
moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
|
||
|
|
moveY = e.originalEvent.targetTouches[0].pageY; //移动过程中Y轴的坐标
|
||
|
|
//判断的时候要计算加上padding的距离
|
||
|
|
if (moveX < leftX) {
|
||
|
|
moveX = leftX;
|
||
|
|
}
|
||
|
|
if (moveX > rightX) {
|
||
|
|
moveX = rightX;
|
||
|
|
}
|
||
|
|
if (moveY < topY) {
|
||
|
|
moveY = topY + 150; //顶部可留空间
|
||
|
|
}
|
||
|
|
if (moveY > bottomY) {
|
||
|
|
moveY = bottomY - 80; //底部可留空间
|
||
|
|
}
|
||
|
|
if (startY < winH) {
|
||
|
|
$(this).css({
|
||
|
|
"top": moveY + sY - startY,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
$(this).css({
|
||
|
|
"left": moveX + sX - startX, //去掉之后仅沿y轴移动
|
||
|
|
"top": moveY + sY - startY,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toGo() {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: "/pages/newindex/newindex" // 跳转至修改密码页面路径
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.continueFloat {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
left: 30rpx;
|
||
|
|
|
||
|
|
.jiantou {
|
||
|
|
background-color: rgba(60, 158, 255, 0.8);
|
||
|
|
width: 100rpx;
|
||
|
|
height: 100rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 100rpx;
|
||
|
|
border: 1px solid white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|