vue mpvue 上拉加载更多示例代码

vue 上拉加载更多示例代码

可以比较简单的改为 mpvue , 去除滚动判断，直接放在 onReachBottom 周期即可。

html

<div id="app">
<div class="integralPage">
<div class="itemList">
<div class="itemBox" v-for="(item, index) in list" :key="index">
<div class="info">
<div class="title">{{item.title}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="num">{{item.num}}</div>
</div>
</div>
<div class="laodMore">
<div v-show="logStatus === 0">
<div>上拉加载</div>
</div>
<div v-show="logStatus === 1">
<div>正在加载</div>
</div>
<div v-show="logStatus === 2">
<div>没有更多数据了</div>
</div>
</div>
</div>
</div>


js

const obj = {
el: '#app',
data: {
list: [],
listParam: {
page: 1,
},
noData: false,
logStatus: 0,
},
created() {
setTimeout(() => {
this.list = [...new Array(20).keys()].map(item => ({ // 初始化数据
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
}))
this.listParam.page += 1
}, 500);
window.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll() { // 如果是小程序, 不用监听滚动事件, 也不用户判断高度, 因为小程序有触底事件 onReachBottom , 直接在其中写请求逻辑即可
this.logStatus = 1
let innerHeight = document.querySelector('#app').clientHeight // #app 是为了获取最外部 div 的高度
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
console.log('onScroll', outerHeight, scrollTop, outerHeight + scrollTop, innerHeight)
if (outerHeight + scrollTop === innerHeight) { // 可以在这个地方给 innerHeight 添加适当的高度调整效果
if (this.noData === true) {
this.logStatus = 2
return false
}
setTimeout(() => {
const data = { // 请求回来的数据
rows: [...new Array(10).keys()].map(item => ({
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
})),
count: 40, // 服务器上总数
}
if (this.list.length < data.count) { // 本地总数是否大于服务器总数
this.list = [...this.list, ...data.rows]
this.listParam.page = this.listParam.page + 1
this.logStatus = 0
} else {
this.logStatus = 2
this.noData = true
}
}, 500);
}
}
}
}
const $vue = new Vue(obj)


less

.integralPage {
font-size: 14px;
color: #101010;
// 分类列表
.itemList {
border-top: 1px solid #bbb;
margin-left: 12px;
margin-right: 12px;
.itemBox {
margin-left: 16px;
margin-right: 2px;
border-bottom: 1px solid #E8E8E8;
padding-top: 7px;
padding-bottom: 7px;
overflow: hidden;
.info {
float: left;
max-width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.time {
font-size: 10px;
color: #878686;
}
}
.num {
padding-top: 10px;
padding-right: 10px;
float: right;
}
}
}
// 上拉加载
.laodMore {
padding-top: 8px;
padding-bottom: 8px;
color: #ccc;
text-align: center;
}
}


mpvue

<template>
<div class="integralPage">
<div class="itemList">
<div class="itemBox" v-for="(item, index) in list" :key="index">
<div class="info">
<div class="title">{{item.title}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="num">{{item.num}}</div>
</div>
</div>
<div class="laodMore">
<div v-show="logStatus === 0">
<div>上拉加载</div>
</div>
<div v-show="logStatus === 1">
<div>正在加载</div>
</div>
<div v-show="logStatus === 2">
<div>没有更多数据了</div>
</div>
</div>
</div>
</template><script>
export default {
data () {
return {
list: [],
listParam: {
page: 1,
},
noData: false,
logStatus: 0,
}
},
// 上拉加载，拉到底部触发
onReachBottom() {
this.onScroll()
},
created() {
setTimeout(() => {
this.list = [...new Array(20).keys()].map(item => ({ // 初始化数据
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
}))
this.listParam.page += 1
}, 500);
},
methods: {
onScroll() { // 如果是小程序, 不用监听滚动事件, 也不用户判断高度, 因为小程序有触底事件 onReachBottom , 直接在其中写请求逻辑即可
this.logStatus = 1
// 可以在这个地方给 innerHeight 添加适当的高度调整效果
if (this.noData === true) {
this.logStatus = 2
return false
}
setTimeout(() => {
const data = { // 请求回来的数据
rows: [...new Array(10).keys()].map(item => ({
title: +new Date() + '签到' + item,
time: '2019/8/13 15:23:22',
num: '+10',
})),
count: 40, // 服务器上总数
}
if (this.list.length < data.count) { // 本地总数是否大于服务器总数
this.list = [...this.list, ...data.rows]
this.listParam.page = this.listParam.page + 1
this.logStatus = 0
} else {
this.logStatus = 2
this.noData = true
}
}, 500);
}
}
}
</script><style lang="scss" scoped>
.integralPage {
font-size: 14px;
color: #101010;
// 分类列表
.itemList {
border-top: 1px solid #bbb;
margin-left: 12px;
margin-right: 12px;
.itemBox {
margin-left: 16px;
margin-right: 2px;
border-bottom: 1px solid #E8E8E8;
padding-top: 7px;
padding-bottom: 7px;
overflow: hidden;
.info {
float: left;
max-width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.time {
font-size: 10px;
color: #878686;
}
}
.num {
padding-top: 10px;
padding-right: 10px;
float: right;
}
}
}
// 上拉加载
.laodMore {
padding-top: 8px;
padding-bottom: 8px;
color: #ccc;
text-align: center;
}
}
</style>