2_上拉加载下拉刷新

 

• 核心代码

<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>