vue loadmore 组件滑动加载更多源码解析
时间:2019-03-30
本文章向大家介绍vue loadmore 组件滑动加载更多源码解析,主要包括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} */ count: 0, /** * 是否正在拖拽中 * @type {boolean} */ dragging: false, /** * 已加载次数 * @type {number} */ times: 0, /** * 已开始记载 * @type {boolean} */ started: false, /** * 正在加载中 * @type {boolean} */ loading: false, dom: null, } }, props: { /** * 初始化后自动开始加载数据 */ autoload: { type: Boolean, default: true, }, /** * 离组件最近的可滚动父级元素(用于监听事件及获取滚动条位置) */ container: { // Selector or Element default: () => (global), }, /** * Axios请求参数配置对象 * {@link https://github.com/mzabriskie/axios#request-config} */ options: { type: Object, default: null, }, /** * 起始页码 */ page: { type: Number, default: 1, }, /** * 每页加载数据条数 */ rows: { type: Number, default: 10, }, /** * 数据加载请求地址 */ url: { type: String, default: '', }, /** * 距离底部多远加载 */ distance: { type: Number, default: 200, }, }, computed: { /** * 是否可以加载 * @returns {boolean} 是与否 */ loadable() { return !this.started || (this.page + this.times) <= this.count }, }, mounted() { if (this.container !== global) { this.dom = document.querySelector(this.container) } else { this.dom = this.container } if (!this.dom) { return } this.dom.addEventListener('scroll', this.scroll, false) if (this.autoload && !this.loading) { this.load() } }, // eslint-disable-next-line beforeDestroy() { if (this.dom) { this.dom.removeEventListener('scroll', this.scroll, false) } }, methods: { /** * 滚动钩子 */ scroll() { const viewHeight = global.innerHeight let parentNode if (this.container !== global) { parentNode = this.$el } else { parentNode = this.$el.parentNode } if (parentNode) { const rect = parentNode.getBoundingClientRect() if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) { this.load() } } }, /** * 加载一组数据的方法 */ load() { if (this.loading) { return } this.started = true this.loading = true const params = { currentPage: this.page + this.times, pageSize: this.rows, } const options = Object.assign({}, this.options, { url: this.url, cancelToken: new CancelToken((cancel) => { this.cancel = cancel }), }) if (String(options.method).toUpperCase() === 'POST') { options.data = Object.assign({}, options.data, params) } else { options.params = Object.assign({}, options.params, params) } this.$axios.request(options).then((res) => { const data = res.result this.times += 1 this.loading = false this.count = data.pageCount this.$emit('success', data.list) this.$emit('complete') }).catch((e) => { this.loading = false this.$emit('error', e) this.$emit('complete') }) }, /** * 重置加载相关变量 */ reset() { this.count = 0 this.times = 0 this.started = false this.loading = false }, /** *重新开始加载 */ restart() { this.reset() this.load() }, }, } </script>
以上所述是小编给大家介绍的vue loadmore 组件滑动加载更多源码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 如何重构你的时间序列预测问题
- 【聊】我个人眼里的ReactJs生态系统
- [WCF REST] Web消息主体风格(Message Body Style)
- apache配置https服务
- [WCF 4.0新特性] 默认绑定和行为配置
- mysql数据库及django用户名启用中文的方法
- 【学习笔记】先行者课程0109-rotate3d_变量、堆、栈
- 通过WCF扩展实现消息压缩
- Linux系统中的信号量机制
- 基于Linux与lpc3250开发板的交叉开发环境搭建
- WCF中关于可靠会话的BUG!!
- [WCF安全系列]谈谈WCF的客户端认证[Windows认证]
- ls命令实现分析
- [WCF安全系列]谈谈WCF的客户端认证[X.509证书认证]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Golang Testing单元测试指南
- 你不知道的Go unsafe.Pointer uintptr原理和玩法
- 深度剖析各种BloomFilter的原理、改进、应用场景
- 深入理解哈希表
- iota: Golang 中优雅的常量
- Go template高级用法、深入详解、手册、指南、剖析
- Docker开启Remote API 访问 2375端口
- Docker实用debug调试技巧锦集
- shell 命名管道,进程间通信, ncat作http server
- Linux atop监控
- go modules中使用replace用法
- 分布式文件系统Ceph的挂载方式
- 在CentOS 7上挂载CephFS
- Qt音视频开发14-mpv读取和控制
- 深入理解Nginx的rewrite模块