前端vue里面点击加载更多_简单封装vue移动端上拉加载更多

{{pullUpInfo.moreText}}

{{pullUpInfo.loadingText}}

{{pullUpInfo.noMoreText}}

export default {

props: {

parentPullUpState: {

default: 0

},

onInfiniteLoad: {

type: Function,

require: false

}

},

data () {

return {

top: 0,

pullUpState: 0, // 1:上拉加载更多, 2:加载中……, 3:我是有底线的

isLoading: false, // 是否正在加载

pullUpInfo: {

moreText: '上拉加载更多',

loadingText: '加载中...',

noMoreText: '我是有底线的'

},

startX: 0,

startY: 0,

endX: 0,

endY: 0

}

},

created () {

// console.log(this.pullUpState)

},

methods: {

/**

* 触摸开始，手指点击屏幕时

* @param {object} e Touch 对象包含的属性

*/

touchStart (e) {

this.startX = e.touches[0].pageX

this.startY = e.touches[0].pageY

},

/**

* 接触点改变，滑动时

* @param {object} e Touch 对象包含的属性

*/

touchMove (e) {

this.endX = e.changedTouches[0].pageX

this.endY = e.changedTouches[0].pageY

let direction = this.getSlideDirection(this.startX, this.startY, this.endX, this.endY)

switch (direction) {

case 0:

// console.log('没滑动')

break

case 1:

// console.log('向上')

this.scrollToTheEnd()

break

case 2:

// console.log('向下')

break

case 3:

// console.log('向左')

break

case 4:

// console.log('向右')

break

default:

}

},

/**

* 触摸结束，手指离开屏幕时

* @param {object} e Touch 对象包含的属性

*/

touchend (e) {

this.isLoading = false

},

/**

* 判断滚动条是否到底

*/

scrollToTheEnd () {

let innerHeight = document.querySelector('.load-moudle').clientHeight

// 变量scrollTop是滚动条滚动时，距离顶部的距离

let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

// 变量scrollHeight是滚动条的总高度

let scrollHeight = document.documentElement.clientHeight || document.body.scrollHeight

// 滚动条到底部的条件

if (scrollTop + scrollHeight >= innerHeight) {

if (this.pullUpState !== 3 && !this.isLoading) {

this.infiniteLoad()

}

// console.log('距顶部' + scrollTop + '滚动条总高度' + scrollHeight + '内容高度' + innerHeight)

}

},

/**

* 上拉加载数据

*/

infiniteLoad () {

if (this.pullUpState !== 0) {

this.pullUpState = 2

this.isLoading = true

this.onInfiniteLoad(this.infiniteLoadDone)

}

},

/**

* 加载数据完成

*/

infiniteLoadDone () {

this.pullUpState = 1

},

/**

* 返回角度

*/

getSlideAngle (dx, dy) {

return Math.atan2(dy, dx) * 180 / Math.PI

},

/**

* 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动

* @param {number} startX X轴开始位置

* @param {number} startY X轴结束位置

* @param {number} endX Y轴开始位置

* @param {number} endY Y轴结束位置

*/

getSlideDirection (startX, startY, endX, endY) {

let dy = startY - endY

let dx = endX - startX

let result = 0

// 如果滑动距离太短

if (Math.abs(dx) 

return result

}

let angle = this.getSlideAngle(dx, dy)

if (angle >= -45 && angle 

result = 4

} else if (angle >= 45 && angle 

result = 1

} else if (angle >= -135 && angle 

result = 2

} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle 

result = 3

}

return result

}

},

watch: {

parentPullUpState (curVal, oldVal) {

this.pullUpState = curVal

}

}

}

.load-more {

width: 100%;

color: #c0c0c0;

background: #fafafa;

font-size: 14px;

}

.no-more-text {

display: block;

width: 150px;

}

.more-tip,

.loading-tip,

.no-more-tip {

display: flex;

align-items: center;

justify-content: center;

height: 150px;

}

.load-moudle .loading-icon {

display: inline-flex;

width: 35px;

height: 35px;

background: url('../../assets/loading.png') no-repeat;

background-size: cover;

margin-right: 5px;

animation: rotating 2s linear infinite;

}

@keyframes rotating {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(1turn);

}

}

.connecting-line {

display: inline-flex;

width: 150px;

height: 2px;

background: #ddd;

margin-left: 20px;

margin-right: 20px;

}

在父组件---引入使用：

:on-infinite-load="onInfiniteLoad"

:parent-pull-up-state="infiniteLoadData.pullUpState"

>

data(){

return{

infiniteLoadData: {

initialShowNum: 3, // 初始显示多少条

everyLoadingNum: 3, // 每次加载的个数

pullUpState: 2, // 子组件的pullUpState状态

pullUpList: [], // 上拉加载更多数据的数组

showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数

},

}

merhods:{

onInfiniteLoad (done) {

console.log(done, this.infiniteLoadData.pullUpState)

if (this.infiniteLoadData.pullUpState === 1) {

this.getSiteInfo()    //获取列表数据的函数

}

done()

}