vue实现瀑布流组件滑动加载更多
作者:BenjaminShih 发布时间:2024-05-02 17:09:45
建议先看vue瀑布流组件上拉加载更多再来食用本文,如果直接想看源码文末就是~
文末新增组件优化,之所以没有删优化前的代码是想让以后自己还能看到走过的路。
上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载的功能。
既然都是加载更多,很多代码思想势必相似,主要区别在于上拉和滑动到底部这个操作上,所以,我们需要注意:
1、上拉加载是point指针touch触摸事件,现在因为是滑动加载,需要添加scroll事件去监听然后执行相应回调
2、上拉加载主要计算触摸滚动距离,滑动加载主要计算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>
———————-我是分割线——————–
2017-09-18 组件优化
我们在写组件时候,通常会大致先分为两种,业务组件和通用组件,业务组件通和业务逻辑相关,一般作为一个业务模块的局部组件, 比如列表中的列表项组件;通用组件适用面广,不会和业务有牵扯,比如弹出框组件。
所以我们开始封装一个组件的时候,就要划分业务逻辑,做什么,不做什么,从外部接收什么,向外部提供什么,这个边界应该非常清楚
但是之前的封装的loadmore组件不太符合这一点,可能是项目一开始比较关注功能的实现,将其当成的一个业务组件撰写,现在有一点需要优化:
之前我们传入了各种请求相关的参数,包括url在组件内部完成加载和页码控制等一系列操作,显然这不太符合组件功能职责单一化的原则, 其实组件内部并不关心加载到第几页或者是需要请求什么后端接口,而只要父组件告诉自己是否还可以加载就可以了, 至于加载请求列表,子组件通知父组件去加载就OK。
最终我们得到一个和业务完全分离的通用组件,代码如下:
<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="loading">正在加载...</span>
<span v-else>没有更多了</span>
</div>
</div>
</template>
<script>
export default {
props: {
/**
* 是否加载
*/
loading: {
type: Boolean,
default: false,
},
/**
* 滚动外部容器, 选择器字符串
*/
container: {
default: () => (global),
},
/**
* 距离底部多远加载
*/
distance: {
type: Number,
default: 200,
},
},
data() {
return {
dom: null, // 外部容器dom
}
},
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()
}
},
methods: {
/**
* 滚动钩子
*/
scroll() {
if (!this.loading) {
return
}
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.load()
}
}
},
/**
* 加载一组数据的方法
*/
load() {
this.$emit('load')
},
},
beforeDestroy() {
if (this.dom) {
this.dom.removeEventListener('scroll', this.scroll, false)
}
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.loadmore {
user-select: none;
&__footer {
color: #e4e4e4;
padding: 20px;
text-align: center;
}
.tc-loading {
~ span {
vertical-align: middle;
}
}
}
</style>
来源:https://blog.csdn.net/sjn0503/article/details/75314641


猜你喜欢
- 基本思路是使用opencv来把随机生成的字符,和随机生成的线段,放到一个随机生成的图像中去。虽然没有加复杂的形态学处理,但是目前看起来效果还
- 目录项目初始化选择 MQTT 客户端库Pip 安装 Paho MQTT 客户端Python MQTT 使用连接 MQTT 服务器导入 Pah
- 不知道怎么忽然想看这个,呵呵 小我的python的反shell的代码 #!/usr/bin/python # Python&nbs
- C++里函数可以设置缺省参数,Java不可以,只能通过重载的方式来实现,python里也可以设置默认参数,最大的好处就是降低函数难度,函数的
- 前言一个Excel电子表格文档称为一个工作簿一个工作簿保存在一个扩展名为.xlsx的文件中一个工作簿可以包含多个表用户当前查看的
- 在数据库中有时我们可能需要对一些数据进行处理,例如四舍五入、直接舍去后面的几位等,其实很简单,都是有现成的函数,我们只需要套用就行了:sel
- 目录什么是引用?引用在数组和对象中的使用引用的传递引用的返回引用的取消总结什么是引用?在 PHP 中引用意味着用不同的名字访问同一个变量内容
- CONVERT将某种数据类型的表达式显式转换为另一种数据类型。由于某些需求经常用到取日期格式的不同.现以下可在SQL Server中将日期格
- 无论是 DAO 还是 ADO 都有两种从 Recordset 对象中查询记录的方法: Find 方法和 Seek 方法。在这两种方法中可以让
- [sql] -- ===================【创建存储过程】===================== USE [Message
- 前言在学习go语言时,做算法题会很经常遇到go语言的各种int类型,为什么会有int、int8、int16等等的类型呢?为什么不像java一
- 从学习Python至今,发现很多时候是将Python作为一种工具。特别在文本处理方面,使用起来更是游刃有余。说到文本处理,那么正则表达式必然
- 本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下原理:原生js的indexOf() 方法,该方
- 导语:近年来,全世界都纷纷投身网络热潮。从小企业到大公司,再到网络学校和大学,大家都在努力提升自己的网络影响力,这样既免费为自身品牌做广告,
- 背景大家好,我是J哥。我们常常面临着大量的重复性工作,通过人工方式处理往往耗时耗力易出错。而Python在办公自动化方面具有天然优势,分分钟
- 解决方案:1、选择Edit Configurations, 删除相关单元测试2、右击__name__ == "__main__&q
- SQL Server中误删除数据的恢复本来不是件难事,从事务日志恢复即可。但是,这个恢复需要有两个前提条件:1. 至少有一个误删除之前的数据
- 最近在写的一个django小项目需要实现用户上传图片的功能,使用到了七牛云存储,特此记录下来。这里我使用的七牛python SDK 版本是7
- 1. 序列__getitem__如果没有 __iter__ 和 __contains__ 方法,Python 会调用 __getitem__
- 页签的流行自从Yahoo!的首页引进页签(tab, 见下图)之后,这种可用性极佳的方式越来越受欢迎,用户也逐步习惯和喜欢上它,因为它可以在原