- core code
<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, // Whether the attribute can be pulled up, false can be pulled up, true is to prohibit the pull up, that is, it is not allowed to swipe up to load data
scrollMode: 'auto' // Elastic scrolling effect on the mobile side, touch is elastic scrolling, auto is inelastic scrolling
}
},
components: {
// Aliasing the component, vue will not be case sensitive when converting template tags, for example: loadMore tags will become loadmore after conversion, which is prone to some matching problems
'v-loadmore': Loadmore
},
mounted () {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
},
methods: {
loadTop: function () {
// The drop-down trigger method provided by the component
// drop down load
// Fixed method, to be called once after the query, for relocation
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 () {
// pull up load
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()// Fixed method, called once after the query, for relocation
}, 3000)
},
isHaveMore: function (isHaveMore) {
// Whether there is a next page, if not, disable pull-up refresh
this.allLoaded = true // true is to prohibit pull-up loading
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>