铁雪资源网 Design By www.gsvan.com
本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下
因为我们项目中,还用了swiper。很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个。代码如下(这个因为很多地方会用,所以建议放在components/common下面):
<template> <div class="loadmore"> <slot></slot> <slot name="bottom"> </slot> </div> </template> <style> .loadmore{ width:100%; } </style> <script> export default { name: 'loadmore', props: { maxDistance: { type: Number, default: 0 }, autoFill: { type: Boolean, default: true }, distanceIndex: { type: Number, default: 2 }, bottomPullText: { type: String, default: '上拉刷新' }, bottomDropText: { type: String, default: '释放更新' }, bottomLoadingText: { type: String, default: '加载中...' }, bottomDistance: { type: Number, default: 70 }, bottomMethod: { type: Function }, bottomAllLoaded: { type: Boolean, default: false }, }, data() { return { // 最下面出现的div的位移 translate: 0, // 选择滚动事件的监听对象 scrollEventTarget: null, containerFilled: false, bottomText: '', // class类名 bottomDropped: false, // 获取监听滚动元素的scrollTop bottomReached: false, // 滑动的方向 down---向下互动;up---向上滑动 direction: '', startY: 0, startScrollTop: 0, // 实时的clientY位置 currentY: 0, topStatus: '', // 上拉加载的状态 '' pull: 上拉中 bottomStatus: '', }; }, watch: { // 改变当前加载在状态 bottomStatus(val) { this.$emit('bottom-status-change', val); switch (val) { case 'pull': this.bottomText = this.bottomPullText; break; case 'drop': this.bottomText = this.bottomDropText; break; case 'loading': this.bottomText = this.bottomLoadingText; break; } } }, methods: { onBottomLoaded() { this.bottomStatus = 'pull'; this.bottomDropped = false; this.$nextTick(() => { if (this.scrollEventTarget === window) { document.body.scrollTop += 50; } else { this.scrollEventTarget.scrollTop += 50; } this.translate = 0; }); // 注释 if (!this.bottomAllLoaded && !this.containerFilled) { this.fillContainer(); } }, getScrollEventTarget(element) { let currentNode = element; while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) { let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY; if (overflowY === 'scroll' || overflowY === 'auto') { return currentNode; } currentNode = currentNode.parentNode; } return window; }, // 获取scrollTop getScrollTop(element) { if (element === window) { return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop); } else { return element.scrollTop; } }, bindTouchEvents() { this.$el.addEventListener('touchstart', this.handleTouchStart); this.$el.addEventListener('touchmove', this.handleTouchMove); this.$el.addEventListener('touchend', this.handleTouchEnd); }, init() { this.bottomStatus = 'pull'; // 选择滚动事件的监听对象 this.scrollEventTarget = this.getScrollEventTarget(this.$el); if (typeof this.bottomMethod === 'function') { // autoFill 属性的实现 注释 this.fillContainer(); // 绑定滑动事件 this.bindTouchEvents(); } }, // autoFill 属性的实现 注释 fillContainer() { if (this.autoFill) { this.$nextTick(() => { if (this.scrollEventTarget === window) { this.containerFilled = this.$el.getBoundingClientRect().bottom >= document.documentElement.getBoundingClientRect().bottom; } else { this.containerFilled = this.$el.getBoundingClientRect().bottom >= this.scrollEventTarget.getBoundingClientRect().bottom; } if (!this.containerFilled) { this.bottomStatus = 'loading'; this.bottomMethod(); } }); } }, // 获取监听滚动元素的scrollTop checkBottomReached() { if (this.scrollEventTarget === window) { return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight; } else { // getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。 return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1; } }, // ontouchstart 事件 handleTouchStart(event) { // 获取起点的y坐标 this.startY = event.touches[0].clientY; this.startScrollTop = this.getScrollTop(this.scrollEventTarget); this.bottomReached = false; if (this.bottomStatus !== 'loading') { this.bottomStatus = 'pull'; this.bottomDropped = false; } }, // ontouchmove事件 handleTouchMove(event) { if (this.startY < this.$el.getBoundingClientRect().top && this.startY > this.$el.getBoundingClientRect().bottom) { // 没有在需要滚动的范围内滚动,不再监听scroll return; } // 实时的clientY位置 this.currentY = event.touches[0].clientY; // distance 移动位置和开始位置的差值 distanceIndex--- let distance = (this.currentY - this.startY) / this.distanceIndex; // 根据 distance 判断滑动的方向 并赋予变量 direction down---向下互动;up---向上滑动 this.direction = distance > 0 "htmlcode"><template> <section class="finan"> <!-- 上拉加载更多 --> <load-more :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' :auto-fill="false" @bottom-status-change="handleBottomChange" ref="loadmore"> <div> 这里写你需要的另外的模块 </div> <div v-show="loading" slot="bottom" class="loading"> 这个div是为让上拉加载的时候显示一张加载的gif图 <img src="/UploadFiles/2021-04-02/uploading.gif">然后在此页面的data里和methods设置如下:
export default { name: 'FinancialGroup', props:{ }, data () { return { // 上拉加载数据 scrollHeight: 0, scrollTop: 0, containerHeight: 0, loading: false, allLoaded: false, bottomText: '上拉加载更多...', bottomStatus: '', pageNo: 1, totalCount: '', } }, methods: { /* 下拉加载 */ _scroll: function(ev) { ev = ev || event; this.scrollHeight = this.$refs.innerScroll.scrollHeight; this.scrollTop = this.$refs.innerScroll.scrollTop; this.containerHeight = this.$refs.innerScroll.offsetHeight; }, loadBottom: function() { this.loading = true; this.pageNo += 1; // 每次更迭加载的页数 if (this.pageNo == this.totalGetCount) { // 当allLoaded = true时上拉加载停止 this.loading = false; this.allLoaded = true; } api.commonApi(后台接口,请求参数) 这个api是封装的axios有不懂的可以看vue2+vuex+axios那篇文章 .then(res => { setTimeout(() => { 要使用的后台返回的数据写在setTimeout里面 this.$nextTick(() => { this.loading = false; }) }, 1000) }); }, handleBottomChange(status) { this.bottomStatus = status; }, }这样就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,vue2,上拉加载
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无基于vue2实现上拉加载功能的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?