专栏首页前端基础vue 的上拉加载,下拉刷新(基于better-scrol)

vue 的上拉加载,下拉刷新(基于better-scrol)

我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址

https://github.com/ustbhuangyi/better-scroll

好了步入正题,这博客仅针对不是很熟悉vue 的上拉刷新的小白,虽然我也是小白,嘿嘿,大神请出门左拐

你是不是想实现下拉刷新(比较难点),上拉加载例如下面这样

如果你是想实现这样,那你就向下看,也许会能帮到你的,可惜没有时间上传githup 不然也是可以骗几个star 的

默认你已经搭建好了基础的vue脚手架及其引入了 better-scroll,不知道怎么引入的上面那个地址有方法

如果你 发现你按照 那个官网写的 你的竟然不能滚动,那你就 记得了,外面层要溢出隐藏,这个样式是最原始的css,没有预处理器是因为,,,,,因为没有安装 ,你按照我写的操作应该是可以滚动的,嘿嘿

然后基本上实现了大半了,你要理解一件事,上拉刷新和下拉加载是根据什么原理,去判断的,是高度,是高度,根据你滚动条的距离来判断的,万变不离js,最原始的js的方法

先看看 better-scroll 提供的方法有那些

 props: {
        /**
         * 1 滚动的时候会派发scroll事件,会截流。
         * 2 滚动的时候实时派发scroll事件,不会截流。
         * 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件
         */
        probeType: {
            type: Number,
            default: 3
        },
        /**
         * 点击列表是否派发click事件
         */
        click: {
            type: Boolean,
            default: true
        },
        /**
         * 是否开启横向滚动
         */
        scrollX: {
            type: Boolean,
            default: false
        },
        /**
         * 是否派发滚动事件
         */
        listenScroll: {
            type: Boolean,
            default: false
        },
        /**
         * 列表的数据
         */
        data: {
            type: Array,
            default: null
        },
        /**
         * 是否派发滚动到底部的事件,用于上拉加载
         */
        pullup: {
            type: Boolean,
            default: true
        },
        /**
         * 是否派发顶部下拉的事件,用于下拉刷新
         */
        pulldown: {
            type: Boolean,
            default: true
        },
        /**
         * 是否派发列表滚动开始的事件
         */
        beforeScroll: {
            type: Boolean,
            default: false
        },
        /**
         * 当数据更新后,刷新scroll的延时。
         */
        refreshDelay: {
            type: Number,
            default: 20
        }
    }

这个在那个官网里面也有,你可以先看看,这个就很重要了,你要的都在这里

touchEnd 很重要,这个是什么我就不解释了吧 不知道去看看W3C

接下来,虽然我也不想做伸手党,但是有些人就是想要,那就成全你呗

<template>
	<div class="wrapper" ref="wrapper">
		<ul class="content">
			<div class="newxin" v-if="down"> { { pulldownTip.text } }

			</div>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<li>喵喵喵</li>
			<div class="newxin" v-if="up"> { { pulldownTip.textup } }

			</div>
		</ul>
	</div>
</template>
<script>
	import BScroll from 'better-scroll';
	export default {
		data() {
			return {
				loadingConnecting: false,
				down: false,
				up: true,
				pulldownTip: {
					text: '下拉刷新', // 松开立即刷新
					textup: '上拉加载更多', // 松开立即刷新
					rotate: '' // icon-rotate
				}
			};
		},
		mounted() {
			setTimeout(() => {
				this.BS();
			}, 20);
		},
		watch: {
			// 监听数据的变化,延时refreshDelay时间后调用refresh方法重新计算,保证滚动效果正常
			data() {
				setTimeout(() => {
					this.BS();
				}, this.refreshDelay);
			}
		},
		methods: {
			BS() {
				if(!this.$refs.wrapper) {
					return;
				}
				// better-scroll的初始化
				this.scroll = new BScroll(this.$refs.wrapper, {
					probeType: this.probeType,
					click: this.click,
					scrollX: this.scrollX
				});
				this.scroll.on('scroll', pos => {
					console.log(pos.y);
					//如果下拉超过50px 就显示下拉刷新的文字
					if(pos.y > 50) {
						this.pulldownTip.text = "放手刷新"
						this.down = true
					} else {
						this.down = false
					}
				});
				//touchEnd 通过这个方法来监听下拉刷新
				this.scroll.on('touchEnd', pos => {
					// 下拉动作
					if(pos.y > 50) {
						console.log('下拉刷新成功');
						console.log('这里执行你方法');
						this.down = false;
					}
					if(this.scroll.maxScrollY > pos.y + 10) {
						console.log('加载更多');
						//使用refresh 方法 来更新scroll  解决无法滚动的问题
						this.scroll.refresh();
					}
					console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y);
				});
				console.log(this.scroll.maxScrollY);
			}
		},
		props: {
			/**
			 * 1 滚动的时候会派发scroll事件,会截流。
			 * 2 滚动的时候实时派发scroll事件,不会截流。
			 * 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件
			 */
			probeType: {
				type: Number,
				default: 3
			},
			/**
			 * 点击列表是否派发click事件
			 */
			click: {
				type: Boolean,
				default: true
			},
			/**
			 * 是否开启横向滚动
			 */
			scrollX: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否派发滚动事件
			 */
			listenScroll: {
				type: Boolean,
				default: false
			},
			/**
			 * 列表的数据
			 */
			data: {
				type: Array,
				default: null
			},
			/**
			 * 是否派发滚动到底部的事件,用于上拉加载
			 */
			pullup: {
				type: Boolean,
				default: true
			},
			/**
			 * 是否派发顶部下拉的事件,用于下拉刷新
			 */
			pulldown: {
				type: Boolean,
				default: true
			},
			/**
			 * 是否派发列表滚动开始的事件
			 */
			beforeScroll: {
				type: Boolean,
				default: false
			},
			/**
			 * 当数据更新后,刷新scroll的延时。
			 */
			refreshDelay: {
				type: Number,
				default: 20
			}
		}
	}

	;
</script>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}
	
	.wrapper {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
	}
	
	.wrapper .content {
		width: 100%;
	}
	
	.wrapper .content li {
		background-color: #ffffff;
		width: 100%;
		height: 66px;
		text-align: center;
		line-height: 66px;
		border-bottom: solid 1px #f0f0f0;
	}
	/* 刷新 */
	
	.newxin {
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: red;
	}
</style>

以上基本就是vue 的上拉刷新了,我觉得 better-scroll很不错的,移动端滑动和原生有得一拼,其实每个事情都需要换个角度想问题,不是为了问题而解决问题,而是换个思想角度去思考问题,也许你就知道,其实你想的没有那么复杂,就拿下来刷新来说,你得到你当前手指拖动滚动条的高度,这个可以得到吧,然后当超过那个高度的时候,你就可以执行你的方法,松手就停止,其实都是这样啊,不要想复杂了,同学

有问题可以留言哦,大家一起解决问题,一起成长,谢谢

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在vue中的html标签{{}}内可以调用函数方法

    今天领导提个需求,要求在金额上强制保留两位小数,本想着后台直接返回数据时,带着两位的小数,前端只是做个显示作用,后台说保留了小数但在传输过程中去掉了,可能他们做...

    honey缘木鱼
  • C#开发中表单提交Ctrl+Enter和Enter快捷键的jQuery实现方式

    以前写HRM系统的时候,通过C#代码和javascript实现过文本输入框中Enter提交表单的功能,使用的原理是针对textbox进行Enter键的监控,如果...

    崔文远TroyCui
  • 前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 前端每周清单第 42 期:V8 的执行流与优化,Pinterest 的 PWA 实践

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点,开发教程,工程实践,深度阅读,开源项目,巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 使用 frp 内网穿透工具

    之前分享过一个 ngrok内网穿透工具,这个不是开源的,再推荐一个国人开发的免费开源工具 frp,配置项更多,功能更强大。 不过需要你有一台公网IP的服务器,...

    mafeifan
  • 前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与未来

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • C# GridView中固定表头的jQuery实现

    听到GridView,你肯定觉得这种控件方式的WebForm开发已经是过时的技术了,连微软自己都将MVC推出了5个版本了。但是,要知道做技术万变不离其宗,至今还...

    崔文远TroyCui
  • 前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊

扫码关注云+社区

领取腾讯云代金券