下拉刷新组件封装

最新推荐文章于 2024-09-25 16:55:21 发布
最新推荐文章于 2024-09-25 16:55:21 发布
阅读量242 收藏
点赞数 2
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcvb0825/article/details/142387404
版权

一：在components文件下创建refresh文件夹（refresh/index）

<template>
	<scroll-view style="height: 100%;" :style="{'background-color': bgColor}"
		:scroll-y="allow_scroll_y" :refresher-enabled="false"
		@scroll="scroll" @scrolltolower="bottomTolower"
	>
		<!-- <view style="height: var(--status-bar-height);"></view> -->
		<view class="refresh-moudle"
			@touchstart="touchStart($event)" 
			@touchmove="touchMove($event)" 
			@touchend="touchEnd($event)" 
			:style="{'margin-top': showTopLoad ? `calc(${top}px - 180rpx)` : '0'}">
			<!-- :style="{transform: 'translate3d(0,' + top + 'px, 0)'}"
		> -->
			  <view class="pull-refresh" :style="{'display': showTopLoad? 'block': 'none'}">
				<slot name="pull-refresh">
				  <view class="down-tip" v-if="dropDownState==1">
					<uv-icon :color="contentColor" class="down-img" name="arrow-downward"></uv-icon>
					<!-- <image v-if="dropDownInfo.downImg" class="down-img" :src="dropDownInfo.downImg"></image> -->
					<view class="down-text" :style="{'color': contentColor}">{{downText}}</view>
				  </view>
				  <view class="up-tip" v-if="dropDownState==2">
					<uv-icon :color="contentColor" class="up-img" name="arrow-downward"></uv-icon>
					<!-- <image v-if="dropDownInfo.upImg" class="up-img" :src="dropDownInfo.upImg"></image> -->
					<view class="up-text" :style="{'color': contentColor}">{{upText}}</view>
				  </view>
				  <view class="refresh-tip" v-if="dropDownState==3">
					  <!-- <div class="loader"></div> -->
					  <uv-loading-icon mode="spinner" :color="contentColor" :textColor="contentColor"></uv-loading-icon>
					<!-- <image v-if="dropDownInfo.refreshImg" class="refresh-img" :src="dropDownInfo.refreshImg"></image> -->
					<view class="refresh-text" style="margin-left: 15px;" :style="{'color': contentColor}">{{refreshText}}</view>
				  </view>
				</slot>
			  </view>
			<slot></slot>
			<view v-if="!showTopLoad" style="width: 100%; margin: 10rpx 0;">
				<slot name="push-refresh">
					<view class="flex" v-if="!showMore">
						<view class="refresh-text" style="margin-left: 15px;" :style="{'color': contentColor}">没有更多数据了</view>
					</view>
					<view class="flex" v-else-if="pushLoading">
						<uv-loading-icon mode="spinner" :color="contentColor" ></uv-loading-icon>
						<view class="refresh-text" style="margin-left: 15px;" :style="{'color': contentColor}">加载中...</view>
					</view>
					<view class="flex" v-else>
						<uv-icon :color="contentColor" class="up-img" name="arrow-upward"></uv-icon>
						<view class="up-text" :style="{'color': contentColor}">上拉显示更多</view>
					</view>
				</slot>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {	
        name: "refreshCustom",
		props: {
			bgColor: {
				type: String,
				default: '#A03AFF'
			},
			loadColor: {
				type: String,
				default: 'rgb(60,15,95)'
			},
			contentColor: {
				type: String,
				default: 'rgb(60,15,95)'
			},
			downText: {
				type: String,
				default: '下拉刷新'
			},
			upText: {
				type: String,
				default: '释放立即刷新'
			},
			refreshText: {
				type: String,
				default: '刷新中...'
			},
			/**
			 * 显示下拉功能，true：下拉刷新，false：上拉刷新
			 */
			showTopLoad: {
				type: Boolean,
				default: true
			},
			/**
			 * 下拉刷新中，是否可以继续加载数据
			 */
			showMore: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
			  defaultOffset: 80, // 下拉偏移高度, 如果要改建议相应的修改.releshMoudle的margin-top和.down-tip, .up-tip, .refresh-tip的height
			  top: 0,
			  startY: 0,
			  isDropDown: false, // 是否下拉
			  isRefreshing: false, // 是否正在刷新
			  dropDownState: 1, // 显示1:下拉可以刷新, 2:松开立即刷新, 3:正在刷新数据中...
			  
			  scrollTop: 0,
			  allow_scroll_y: true,//解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题
			  allowTouchMove: true, //控制是否允许touchMove事件
			  
			  pushLoading: false,
			}
		},
		methods: {
			scroll: function(e) {
				this.$nextTick(function() {
					this.scrollTop = e.detail.scrollTop
				});
			},
			/**
			 * 触摸开始，手指点击屏幕时
			 * @param {object} e Touch 对象包含的属性
			 */
			touchStart (e) {
				if (!this.showTopLoad) {
					return
				}
				this.startY = e.changedTouches[0].pageY
				this.startScrollTop = this.scrollTop				
				this.allowTouchMove = true //控制是否允许touchMove事件
			},
			
			/**
			 * 接触点改变，滑动时
			 * @param {object} e Touch 对象包含的属性
			 */
			touchMove (e) {
				//控制是否允许touchMove事件
				if(!this.allowTouchMove) {
					return
				}
				
				//解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题
				this.$nextTick(function() {
					if(this.scrollTop<0) {
						this.allow_scroll_y = false
					} else {
						this.allow_scroll_y = true
					}
				});
				
				if(this.scrollTop <= 0) {
					if (e.changedTouches[0].pageY > this.startY) {
						// 下拉
						this.isDropDown = true
						if (!this.isRefreshing) {
						  // 获取拉取的间隔差  当前移动的y点          初始的y点        初始顶部距离
						  let diff = e.changedTouches[0].pageY - this.startY -  this.startScrollTop
						  this.top = Math.pow(diff, 0.8) + (this.dropDownState === 3 ? this.defaultOffset : 0);
						  if (this.top >= this.defaultOffset) {
							this.dropDownState = 2
							e.preventDefault();
						  } else { 
							this.dropDownState = 1
							// 去掉会导致ios无法刷新
							e.preventDefault();
						  }
						}
					} else {
						this.isDropDown = false
						this.dropDownState = 1
					}
				}
			},
			
			/**
			 * 触摸结束，手指离开屏幕时
			 * @param {object} e Touch 对象包含的属性
			 */
			touchEnd (e) {
			  //解决因ios环境下scrollview的scrolltop可下拉为负数带来的体验问题	
			  this.$nextTick(function() {
				  this.allow_scroll_y = true
			  });
			  
			  if (this.isDropDown && !this.isRefreshing) {
				if (this.top >= this.defaultOffset) {
				  // do refresh
				  this.isRefreshing = true
				  this.refresh();
				} else {
				  // cancel refresh
				  this.isRefreshing = false
				  this.isDropDown = false
				  this.dropDownState = 1
				  this.top = 0
				}
			  }
			},
			
			/**
			 * 刷新
			 */
			refresh () {
			  this.dropDownState = 3
			  this.top = this.defaultOffset
			  // 获取数据，结束正在刷新动画
			  this.$emit('onRefresh', { data: 'data123', cb: () => {
				  this.refreshDone()
			  }});
			  		  
			  setTimeout(() => {
				this.refreshDone()
			  }, 30000);
			},
			
			/**
			 * 刷新完成
			 */
			refreshDone () {
			  this.isRefreshing = false
			  this.isDropDown = false
			  this.dropDownState = 1
			  this.top = 0
			},
			/**
			 * 上拉方法
			 */
			bottomTolower() {
				console.log('--- bottomTolowerbottomTolower')
				this.pushLoading = true
				this.$emit('onBottomRefresh', { cb: () => {
					this.pushLoading = false
				}})
				setTimeout(() => {
					this.pushLoading = false
				}, 30000);
			}
		}
	}
</script>

<style>
	/* HTML: <div class="loader"></div> */
	.loader {
	  width: 25px;
	  aspect-ratio: 1;
	  display: grid;
	  border-radius: 50%;
	  /* background:
	    linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
	    linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%; */
	  /* background:
	    linear-gradient(0deg ,rgb(60 15 95/50%) 30%,#0000 0 70%,rgb(60 15 95/100%) 0) 50%/8% 100%,
	    linear-gradient(90deg,rgb(60 15 95/25%) 30%,#0000 0 70%,rgb(60 15 95/75% ) 0) 50%/100% 8%; */
	  background:
	    linear-gradient(0deg ,rgb(60 15 95/50%) 30%,#0000 0 70%,rgb(60 15 95/100%) 0) 50%/8% 100%,
	    linear-gradient(90deg,rgb(60 15 95/25%) 30%,#0000 0 70%,rgb(60 15 95/75% ) 0) 50%/100% 8%;
	  background-repeat: no-repeat;
	  animation: l23 1s infinite steps(12);
	}
	.loader::before,
	.loader::after {
	   content: "";
	   grid-area: 1/1;
	   border-radius: 50%;
	   background: inherit;
	   opacity: 0.915;
	   transform: rotate(30deg);
	}
	.loader::after {
	   opacity: 0.83;
	   transform: rotate(60deg);
	}
	@keyframes l23 {
	  100% {transform: rotate(1turn)}
	}
</style>

<style lang="scss" scoped>
	$height: 180rpx;
	.refresh-moudle {
		width: 100%;
		margin-top: -$height;
		-webkit-overflow-scrolling: touch; /* ios5+ */
		.pull-refresh {
			width: 100%;
			color: #999;
			transition-duration: 200ms;
			font-size: 28upx;
			.down-tip,
			.up-tip,
			.refresh-tip {
				display: flex;
				align-items: center;
				justify-content: center;
				height: $height;
			}
			.down-img,
			.up-img,
			.refresh-img{
				width: 50upx;
				height: 50upx;
				margin-right: 30upx;
			}
			.down-img {
			  transform: rotate(0deg);
			  animation: anticlockwise 0.8s ease;
			}
			@keyframes anticlockwise {
			  0% {
				transform: rotate(-180deg);
			  }
			  100% {
				transform: rotate(0deg);
			  }
			}
			.up-img {
			  transform: rotate(180deg);
			  animation: clockwise 0.8s ease;
			}
			@keyframes clockwise {
			  0% {
				transform: rotate(0deg);
			  }
			  100% {
				transform: rotate(-180deg);
			  }
			}
			.refresh-img {
			  animation: rotating 1.5s linear infinite;
			}
			@keyframes rotating {
			  0% {
				transform: rotate(0deg);
			  }
			  100% {
				transform: rotate(1turn);
			  }
			}
		}
	}
</style>

一：如何使用

bgColor  loadColor  contentColor这三个颜色自定义

<refresh @onRefresh="onRefresh" :bgColor="null" :loadColor="'RGBA(41, 184, 118, 1)'"
					:contentColor="'RGBA(160, 237, 193, 1)'">
    /*列表内容*/
</refresh>

<script setup>
import Refresh from '@/components/refresh/index.vue'

async function onRefresh(option) {
	console.log('onRefresh ---', option);
	const {
		cb,
		data
	} = option;

	try {
		await getData('1', '1', '10', token), //将要刷新的数据放这里，确保异步的请求完成
	} catch (error) {
		console.error('Error fetching backpack list:', error);
	} finally {
		cb && cb(); // 在完成后调用回调
	}
}

</script>

开心点啦.
关注
flutter 上拉加载下拉刷新组件封装
wenyun936的博客
12-08 306
这里呢我们需要传入我们列表模块的Widget child，我的列表总长度，当前的列表长度， 以及我们的上拉下拉所对应的 事件。然后我们先上代码后说实现。纯小白 大佬勿怪！纯小白 大佬勿怪！纯小白 大佬勿怪！
vue3封装一个下拉刷新组件
baidu_41601048的博客
08-06 372
vue3封装一个下拉刷新组件
react-native之上拉加载，下拉刷新组件封装
dachaoxuexi的博客
11-27 6128
react-native 自定义封装刷新组件几个月没写博客了，最近一直在写react 和react-native，前几天刚发了一版基于react-native混合开发的App,这几天赶快总结下。写过java的同学，再去学习react和react-native就会比较容易上手，并且会有一种似曾相识的感觉，不错，今天我要总结的刷新就是和Android原生的刷新很类似的一种实现，在Android原生当中，
html仿照聊天下拉刷新,h5实现下拉刷新，模拟原生下拉刷新，封装组件
weixin_36484898的博客
06-09 710
上一篇，我们实现了h5 实现向左平滑，出现按钮操作，封装组件，模拟购物车左滑删除，现在我们将要实现一个下拉刷新的组件，模拟原生下拉刷新的操作。这对h5手势的要求也是蛮高的，接下来，我们就一步一步的实现下拉刷新的操作。需求背景在原生app中嵌入h5页面，有些页面需要下拉刷新操作，一般比较简单的方法就是使用其他框架封装的下拉刷新，比如说mint-ui框架中的loadmore组件就可以实现下拉刷新操作，...
vue通过better-scroll 封装自定义的下拉刷新组件
浮生离梦的博客
12-18 529
一、需求问题 在vue的项目中，我们可能也经常会遇到这样的需求。当在页面当中，对页面进行下拉刷新，重新请求数据，加载新的内容。针对这个，我们可以使用better-scroll，在此基础上进行封装下拉刷新组件，实现多个页面都可以使用这个组件，下拉刷新，得到复用。 二、需求分析 在components文件夹中，建立Scroller文件夹，里面建立index.vue文件，作为Scroller组件。这个...
Vue实现下拉刷新组件（简单明了）
热门推荐
Kamto
01-02 2万+
笔者在写这篇文章时，刚刚完成了下拉组件的封装，还热乎着。迫不及待的想分享给大家。在这之前，如果你跟我一样带着些迷惑和好奇，想要自己动手完成一些框架中的组件并了解其原理。希望这篇文章可以帮到你。 一、首先分析一下，他的核心是什么，你或许应该想到了，那就是下拉到一定位置后，手指离开屏幕就触发一个函数，听起来不难，但过程中我还是遇到了一些逻辑的问题，逻辑搞懂了，so easy，我就直接上代码了 &...
vue下拉刷新样式，（封装组件）
m0_64207574的博客
03-16 1829
vue下拉刷新样式
手把手教你开发下拉刷新组件-小程序开发
标梵互动
01-26 736
下拉刷新功能既实现了页面数据更新又让用户在使用产品时有了良好的交互体验。比如下图： 图片是不是很酷？体验感一下子就上来了。 有人会说，这是APP的效果，小程序可不可以也做出类似的下拉刷新效果呢？答案当然是可以的。 下面手把手教大家撸一个简单的下拉刷新组件，至于酷炫的动画效果，当你实现了下拉刷新功能后再去花时间琢磨叭。 准备工作 我们需要用到以下小程序组件： scroll-view[1] 针对于scroll-view组件，小程序官方文档有详细的说明，如果你还不太清楚，可以自行到微信官方小程序文档上去查看，这
微信小程序封装列表上拉加载，下拉刷新组件（粘贴可用）
weixin_51410591的博客
04-12 684
【代码】微信小程序封装列表上拉加载，下拉刷新组件（粘贴可用）
基于vue封装的轻量级下拉刷新组件
08-12
完成组件封装后，其他Vue组件可以通过`<v-pull-refresh>`标签直接引用该下拉刷新组件，并通过props传递配置参数，如刷新回调函数等。 六、优化与扩展 为了提高组件的通用性和可扩展性，可以考虑以下优化： - 添加...
react-native-refresh-list-view:基于FlatList的上拉、下拉刷新组件
04-12
下拉刷新 上拉翻页 已加载全部数据 安装 NPM npm install --save react-native-refresh-list-view 手动安装 下载源码，将RefreshListView.js拖入工程中 运行Demo 第一步 进入Example目录，执行： npm install 第二步...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 554
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 563
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 376
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 579
DC00015【含配套文档】基于java web校园网上购物系统。
前端入门：HTML+CSS
mingangel的博客
09-21 768
之前的文章我已经讲过HTML，这篇文章我将讲解HTML和CSS的案例。
vue绘制评论页面
最新发布
小小小猿
09-25 180
【代码】vue绘制评论页面。
WebGL阴影与后期处理
天涯学馆
09-24 140
在WebGL中实现更复杂的后期处理效果，通常会使用多个步骤，例如使用多个帧缓冲对象进行链式处理。它通过从光源视角渲染场景的深度信息，并在主渲染中使用这个深度信息来判断像素是否在阴影中。DOF（Depth of Field）模拟相机的焦距，使远离焦点的物体变得模糊。色调映射通常用于调整图像的动态范围，使其适应显示器的显示能力。WebGL还可以实现其他高级视觉效果，如SSAO（屏幕空间环境光遮蔽）、DOF（景深）、Bloom（光晕）等。SSAO是一种近似技术，用于模拟物体表面的阴影，增加场景的深度感。
Vue封装下拉刷新组件
05-31
下拉刷新是移动端 APP 中常见的交互方式，可以提高用户体验，因此我们可以将其封装成一个组件，方便在多个页面中复用。下面是一个简单的 Vue 下拉刷新组件的实现： ```html <template> <div class="pull-refresh-wrapper"> <div class="pull-refresh-status" :class="{'loading': isLoading}"> <div class="pull-refresh-icon"></div> <div class="pull-refresh-text">{{ text }}</div> </div> <div class="pull-refresh-content" ref="content"> <slot></slot> </div> </div> </template> <script> export default { props: { threshold: { type: Number, default: 80 }, text: { type: String, default: '下拉刷新' } }, data() { return { startY: 0, isLoading: false, isDragging: false }; }, mounted() { this.$refs.content.addEventListener('touchstart', this.handleTouchStart); this.$refs.content.addEventListener('touchmove', this.handleTouchMove); this.$refs.content.addEventListener('touchend', this.handleTouchEnd); }, beforeDestroy() { this.$refs.content.removeEventListener('touchstart', this.handleTouchStart); this.$refs.content.removeEventListener('touchmove', this.handleTouchMove); this.$refs.content.removeEventListener('touchend', this.handleTouchEnd); }, methods: { handleTouchStart(e) { this.startY = e.touches[0].clientY; }, handleTouchMove(e) { if (this.isLoading) { return; } const currentY = e.touches[0].clientY; const distance = currentY - this.startY; if (distance > 0 && this.$refs.content.scrollTop === 0) { this.isDragging = true; e.preventDefault(); if (distance >= this.threshold) { this.text = '松开刷新'; } else { this.text = '下拉刷新'; } } else { this.isDragging = false; } }, handleTouchEnd() { if (this.isLoading || !this.isDragging) { return; } if (this.text === '松开刷新') { this.isLoading = true; this.text = '正在刷新'; this.$emit('refresh', () => { this.isLoading = false; this.text = '下拉刷新'; }); } else { this.text = '下拉刷新'; } this.isDragging = false; } } }; </script> <style> .pull-refresh-wrapper { height: 100%; overflow: hidden; } .pull-refresh-status { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #666; } .pull-refresh-icon { width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 2px solid #666; border-top-color: transparent; animation: spin 0.6s linear infinite; } .pull-refresh-text { white-space: nowrap; } .pull-refresh-content { height: calc(100% - 80px); overflow-y: auto; } .loading .pull-refresh-icon { border-color: #42b983; border-top-color: transparent; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> ``` 在上面的代码中，我们使用了 touch 事件来实现下拉刷新。当用户下拉到一定程度时，组件会触发 refresh 事件，我们可以在该事件中进行数据的异步请求。在请求完成后，将 isLoading 设为 false 即可停止 loading 状态。 另外，我们使用了 slot 来插入需要刷新的内容，并监听了 touchstart、touchmove 和 touchend 事件来处理下拉刷新的逻辑。其中，handleTouchMove 方法用于判断下拉距离是否达到阈值，并改变刷新文本的内容；handleTouchEnd 方法用于处理下拉刷新的触发事件，如果下拉距离达到阈值，则触发 refresh 事件，并将 isLoading 设为 true，同时改变刷新文本的内容为“正在刷新”。在事件处理函数中，我们使用了箭头函数来确保 this 指向正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值