下拉刷新组件（Vue版）

最新推荐文章于 2024-04-20 06:33:47 发布

澜漾

最新推荐文章于 2024-04-20 06:33:47 发布

阅读量937

点赞数 1

分类专栏： H5新特性实战小demo 文章标签：下拉刷新

本文链接：https://blog.csdn.net/weixin_44601948/article/details/106892615

版权

H5新特性实战小demo 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉刷新</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://lib.baomitu.com/vue/2.6.11/vue.common.dev.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#box {
			height: 100vh;
			overflow: scroll;
		}

		.box-item {
			width: 100%;
			height: 100px;
			box-sizing: border-box;
			border: 1px solid skyblue;
			font-size: 40px;
			text-align: center;
			background-color: #0077AA;
		}

		.box-item::after {
			content: "";
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		.drownFresh {
			width: 100%;
			background-color: #EBEBEB;
			text-align: center;
		}

		.drownFresh-hold,
		.drownFresh-release {
			padding: 20px 0;
		}
	</style>
	<style>
		.css-icon {
			display: inline-block;
			height: 1em;
			width: 1em;
			font-size: 20px;
			box-sizing: border-box;
			text-indent: -9999px;
			vertical-align: middle;
			position: relative;
		}

		.css-icon::before,
		.css-icon::after {
			content: '';
			box-sizing: inherit;
			position: absolute;
			left: 50%;
			top: 50%;
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		.icon-upward {
			transition: transform .3s;
		}

		.icon-upward::before {
			height: .65em;
			width: .65em;
			border-style: solid;
			border-width: 2px 0 0 2px;
			-ms-transform: translate(-50%, -50%) rotate(45deg);
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.icon-upward::after {
			height: .8em;
			border-left: 2px solid;
			top: 55%;
		}

		.icon-upward.active {
			transform: rotate(180deg);

		}
	</style>
	<body>
		<div id="box" ref="box">
			<div class="drownFresh" ref="drownFresh">
				<div class="drownFresh-hold" ref="drownFresh_hold">
					<i ref="icon" class="css-icon icon-upward"></i>
					<p>释放刷新</p>
				</div>
				<div class="drownFresh-release" ref="drownFresh_release" v-show="drownFresh_release">
					<p>假装是个loading图标</p>
				</div>
			</div>
			<div class="box-item" v-for="(i,j) in list" :key="j">{{j}}</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				list: Array(100).fill(0).map((i, j) => j),
				drownFresh_release: false
			},
			mounted() {
				let that = this
				const Box = this.$refs.box // 整个大元素
				const iconEl = this.$refs.icon // 手写icon图标
				const drownFresh = this.$refs.drownFresh
				const drownFresh_hold = this.$refs.drownFresh_hold // 下拉刷新块
				const drownFresh_release = this.$refs.drownFresh_release // 释放加载块
				drownFresh.style.marginTop = `-${drownFresh_hold.offsetHeight}px`


				let offsetY, MoveOffset, timer;

				Box.addEventListener('touchstart', function(e) {
					offsetY = e.touches[0].pageY
				})
				Box.addEventListener('touchmove', function(e) {
					if (this.scrollTop != 0) return //	不到顶部不做操作
					MoveOffset = e.touches[0].pageY - offsetY // 下拉的距离
					if (MoveOffset < 0 || MoveOffset > 180) return // 避免初始化赋值  || 下拉距离超过180 停止拉伸
					drownFresh.style.marginTop = `-${drownFresh_hold.offsetHeight-MoveOffset}px`
					// if(drownFresh_hold.offsetHeight-MoveOffset<0){
					// 	this.style.transform = `translateY(${MoveOffset}px)` //	动态拉伸距离
					// 	this.style.transition = '' // 动画清0
					// }
					
					//  下拉距离超过60 箭头转向
					MoveOffset > 60 ? iconEl.classList.add('active') : iconEl.classList.remove('active')
				})
				Box.addEventListener('touchend', function(e) {
					if (MoveOffset > 60) {
						// this.style.transform = `translateY(0px)`
						// this.style.transition = '0.8s'
						that.drownFresh_release = true
						if (timer) return
						timer = setTimeout(() => {
							that.drownFresh_release = false
							iconEl.classList.remove('active')
							timer = null
							clearTimeout(timer)
							//  释放刷新后接口写在这
							console.log('接口刷新了')
						}, 800)
					} else {
						
					}
					
					drownFresh.style.marginTop = `-${drownFresh_hold.offsetHeight}px`
					offsetY = null
					MoveOffset = null

				})
			}
		})
	</script>
</html>

澜漾

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
下拉刷新组件（Vue版）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下拉刷新</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <.
复制链接

扫一扫