- 核心代码
<template>
<div id="load">
<div class="page-loadmore">
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<v-loadmore :top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
:auto-fill="false"
ref="loadmore">
<ul class="page-loadmore-list">
<li class="page-loadmore-listitem" v-for="(val, key) in pageList">{{val.name}}</li>
</ul>
</v-loadmore>
</div>
</div>
</div>
</template>
<script>
import { Loadmore } from 'mint-ui'
export default {
data: function () {
return {
wrapperHeight: 0,
pageList: [
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'lisi', age: 18}
],
allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
}
},
components: {
// 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
'v-loadmore': Loadmore
},
mounted () {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
},
methods: {
loadTop: function () {
// 组件提供的下拉触发方法
// 下拉加载
// 固定方法，查询完要调用一次，用于重新定位
var temp = this.$refs.loadmore
var pageList = this.pageList
setTimeout(() => {
for (var i = 0; i < 10; i++) {
var item = {name: 'zhangsan' + i, age: 20}
pageList.unshift(item)
}
temp.onTopLoaded()
}, 3000)
},
loadBottom: function () {
// 上拉加载
var temp = this.$refs.loadmore
var pageList = this.pageList
setTimeout(() => {
var test = [
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20},
{name: 'zhangsan', age: 20}]
test.forEach((item, index) => {
pageList.push(item)
})
temp.onBottomLoaded()// 固定方法，查询完要调用一次，用于重新定位
}, 3000)
},
isHaveMore: function (isHaveMore) {
// 是否还有下一页，如果没有就禁止上拉刷新
this.allLoaded = true // true是禁止上拉加载
if (isHaveMore) {
this.allLoaded = false
}
}
}
}
</script>
<style scoped>
::-webkit-scrollbar {
display: none
}
.page-loadmore-list {
padding: 0px;
margin: 0px;
}
.page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center;
list-style-type: none;
border-bottom: 1px solid gray;
}
.page-loadmore-wrapper {
overflow: scroll;
}
</style>