新生报到移动端V1.0

pages/compoents/FloatBall.vue

@@ -0,0 +1,87 @@
+<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>