vant实现下拉刷新和上拉加载_vantui的上拉加载及下拉刷新的使用示例

fixed

title="数据列表"

right-text="退出登录"

/>

v-model="loading"

:finished="finished"

@load="onLoad"

:offset="10"

>

export default {

data(){

return {

list: [],

loading: false, //是否处于加载状态

finished: false, //是否已加载完所有数据

isLoading: false, //是否处于下拉刷新状态

}

},

methods:{

onLoad() { //上拉加载

setTimeout(() => {

for (let i = 0; i < 15; i++) {

this.list.push(this.list.length + 1);

}

this.loading = false;

if (this.list.length >= 60) {

this.finished = true;

}

}, 500);

},

onRefresh() { //下拉刷新

setTimeout(() => {

this.finished = false;

this.isLoading = false;

this.list = []

this.onLoad()

}, 500);

}

},

mounted(){

let winHeight = document.documentElement.clientHeight //视口大小

document.getElementById(‘list-content‘).style.height = (winHeight - 46) +‘px‘ //调整上拉加载框高度

}

}

.list-content{

margin-top:46px;

overflow:scroll;

}

.list-item{

text-align:center;

}