vue 移动端加载更多分页组件_vue移动端实现滚动加载更多，vant里面的list

1.局部引用安装的vant 的list

在当前有滚动加载更多引如

import Vue from 'vue'

import { List } from 'vant'

import 'vant/lib/index.css'

Vue.use(List);

2.在data变量中定义

data() {

return {

offset:0,//滚动条与底部距离小于 offset 时触发load事件，默认300

pageNo: 1, // 当前页码

pageSize: 10, // 分页大小

total: 0, // 查询总条数

loading: false, // 滚动加载中

finished: false, // 滚动加载完成

charityData:[ ],

};

},

3.html结构

v-model="loading"

:finished="finished"

:offset="offset"

finished-text="没有更多了"

@load="onLoad"

>

v-for="item in charityData"

:key="item.charitableProjectId"

>

{{item.charitableType}}

{{item.charitableProject}}

{{item.projectSummary}}

已筹金额

累计爱心

{{item.donateAmount}} 元

{{item.donations}} 次

4.js的方法

//获取列表数据

getDutyList() {

return new Promise((resolve, reject) => {

let params = {

pageNo: this.pageNo,

pageSize: this.pageSize,

};

this.axios.get(charityApi.charity.charityList, {params}).then((res) => {

if (res.data.status == 0) {

if (res.data.data.resultData.length > 0) {

let result = {

total: res.data.data.total,

pageNo: res.data.data.pageNo,

charityData: res.data.data.resultData,

};

//组装图片地址

let myCharityData = res.data.data.resultData;

result.charityData = myCharityData.map(item => {

return Object.assign({}, item, {

photoPath: PATH_IMG + item.activityHeadUrl

})

});

resolve(result);

}

}

}).catch((err) => {

reject(err);

});

})

},

// 滚动加载更多

onLoad() {

this.loading = true;

this.getDutyList().then((res) => {

this.charityData = this.charityData.concat(res.charityData);

if (this.charityData.length>=res.total) {

this.finished = true;

} else {

this.finished = false;

this.pageNo = this.pageNo + 1

}

this.loading = false

});

},

alert(msg) {

this.$toast.showToast({

msg: msg,

duration: 2000,

});

},