vue loadmore 组件滑动加载更多源码解析组件滑动加载更多源码解析
上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在
上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。
既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意：
上拉加载是上拉加载是point指针指针touch触摸事件，现在因为是滑动加载，需要添加触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调事件去监听然后执行相应回调
上拉加载主要计算触摸滚动距离，滑动加载主要计算上拉加载主要计算触摸滚动距离，滑动加载主要计算container底部和视窗上边缘的距离底部和视窗上边缘的距离
事件绑定改成：
mounted() {
···
this.dom.addEventListener('scroll', this.scroll, false)
···
},
beforeDestroy() {
···
this.dom.removeEventListener('scroll', this.scroll, false)
···
},
事件回调改为：
/**
* 滚动钩子
*/
scroll() {
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
// 获取Vue实例使用的根 DOM 元素相对于视口的位置
const rect = parentNode.getBoundingClientRect()
// this.distance 离底部多少距离开始加载
// 如果此元素底边距离视口顶部的距离小于视口高度加上distance之和，就加载下一页
if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
this.load()
}
}
},
源码如下：
<template>
<div class="loadmore" ref="loadmore">
<div class="loadmore__body">
<slot></slot>
</div>
<div class="loadmore__footer">
<span v-if="loading">
<i class="tc-loading"></i>
<span>正在加载</span>
</span>
<span v-else-if="loadable">加载更多</span>
<span v-else>没有更多了</span>
</div>
</div>
</template>
<script type="text/babel">
import axios from 'axios'
const CancelToken = axios.CancelToken
export default {
data() {
return {
/**
* 总页数（由服务端返回）
* @type {number}
*/
资源评论
weixin_38723683
- 粉丝: 6
- 资源: 908
最新资源
- yolo算法-动物数据集-8944张图像带标签-自行车-背景-大象-豹-牛-熊-鹿-马-摩托车-猎豹-福克斯-猴子-美洲虎-太阳能电池板-老虎-犀牛-狮子-山羊-人-狗-天鱼-鸟.zip
- WordPress在线社交问答社区主题Discy V3.8.1
- 公开整理-农业科技创新数据集（2010-2022）.xlsx
- 基于Python卷积神经网络人脸识别驾驶员疲劳检测与预警系统设计毕业源码案例设计
- yolo算法-麻将数据集-2205张图像带标签-绿色-北-南方-西-白色-万-东-红色.zip
- yolo算法-麻将检测数据集-13687张图像带标签-西风.zip
- yolo算法-跌倒检测数据集-10787张图像带标签-检测到跌倒.zip
- 软考冲刺资源之软考系统架构设计师笔记一起努力吧
- delphi 读取多种格式的图像,并实现互转
- Wordpress简约大气昼夜切换导航主题模板NDNAV主题
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
