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>