南强小屋 Design By 杰米
上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在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 组件滑动加载更多源码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无vue loadmore 组件滑动加载更多源码解析的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。