原生JavaScript实现触屏滑动效果进度条

最新推荐文章于 2024-07-12 15:47:36 发布

LaoYe - IT

最新推荐文章于 2024-07-12 15:47:36 发布

阅读量852

点赞数

分类专栏：前端文章标签： JavaScript touchmove

前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

参考地址：https://www.jianshu.com/p/bf0745e51ae5 作者：雅玲哑铃

一、实现原理

首先是用touchmove()时间获取到移动端事件参数，保存下进度条的最大长度，可理解为滑块可移动的距离，
滑块滑动到最左边与最右边就滑不动，我们假设触摸区域在滑块的正中间，那么我们触摸的点与滑块的最左边相差值为滑块宽度的一半。

在按住移动的同时去改变精度条的长度和按钮的相对左部的距离。然后就是距离的计算，主要利用的就是pageX() 属性。pageX是鼠标指针相对于文档的左边缘的位置。在触摸按下是就记录相对位置，在按住移动后就可求出手指移动的距离。从而改变按钮位置和进度条长度。

二、代码案例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>手动滑动进度条</title>
		<style type="text/css">
			.editItem {
				background-color: #fff;
				min-height: 2.475rem;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
			
			.editItem.between {
				justify-content: space-between;
			}
			
			.editItem.budget {
				margin-top: -0.6rem;
			}
			
			.budgetItem {
				height: 5.45rem;
				margin: 20px 20px;
			}
			
			.color9 {
				color: #999;
			}
			
			.size14 {
				font-size: 14px;
			}
			
			.defaultLine {
				height: 2.5px;
				border-radius: 5px;
				background-color: #DADCDD;
				margin: 17px 0 11px;
				position: relative;
				display: flex;
			}
			
			.defaultLine .bar {
				width: 24px;
				height: 24px;
				background-color: #fff;
				border-radius: 50%;
				position: absolute;
				left: 12px;
				top: -11px;
				margin-left: -12px;
				box-shadow: 0px 3px 10px rgba(1, 50, 79, .15);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.chooseBudget {
				font-size: 13px;
				color: #666;
				margin-bottom: -4px;
			}
			
			.blueLine {
				height: 2.5px;
				width: 12px;
				background-color: #28AbFF;
				border-radius: 10px;
			}
		</style>
	</head>

	<body style="margin: 0;">
		<div class="budgetItem">
			<p class="color9 size14 title">人均预算(元)</p>
			<p class="defaultLine">
				<span class="blueLine"></span>
				<span class="bar">
                    
                </span>
			</p>
			<div class="editItem between budget">
				<span class="chooseBudget">1千</span>
				<span class="chooseBudget">3千</span>
				<span class="chooseBudget">5千</span>
				<span class="chooseBudget semi">1万</span>
				<span class="chooseBudget">2千+</span>
				<span class="chooseBudget">不限</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var line = document.getElementsByClassName("defaultLine")[0];
			var bar = document.getElementsByClassName("bar")[0];
			var progress = document.getElementsByClassName("blueLine")[0];

			//滑动进度条
			bar.addEventListener('touchmove', function(event) {
				event.preventDefault();

				console.log(event.targetTouches)
				var styles = window.getComputedStyle(line, null);
				var width = parseInt(styles.width);

				if(event.targetTouches.length == 1) {

					var touch = event.targetTouches[0];
					moveleft = touch.pageX - 12;

					if(moveleft <= 12) {
						moveleft = 12;
					};
					if(moveleft >= parseInt(width) - 12) {
						moveleft = parseInt(width) - 12;
					}
					bar.style.left = moveleft + "px"; //最后把left值附上。
					progress.style.width = moveleft + 12 + "px";
					console.log(bar.style.left)
					console.log(touch.pageX)
				};

			})

		}
	</script>
</html>