vant实现下拉刷新和上拉加载_关于Vant-list 上拉加载以及下拉刷新问题

关于Vant-list 上拉加载以及下拉刷新问题

第一步引入

import { Notify, Dialog, Image, List, PullRefresh } from 'vant'

import Vue from 'vue'

Vue.use(Image).use(List).use(PullRefresh)

第二步

第三步

data () {

return {

productList: [], //异步查询数据

loading: false, //自定义底部加载中提示

finished: false,//自定义加载完成后的提示文案

refreshing: false,//清空列表数据

pageNo: 0 //当前页码

}

}

第四步

methods: {

onLoad () {

this.pageNo++

setTimeout(() => {

if (this.refreshing) {

this.productList = []

this.refreshing = false

}

this.loading = false

const shopId = this.$store.state.user.shopId

//这里是ajax请求 根据自己业务需求

pageList({ shopId: shopId, pageNo: this.pageNo, pageSize: 2 }).then(res => {

if (this.validResp(res)) {

this.total = res.data.pageNo

this.loading = true

this.productList.push(...res.data.dataList)

}

if (this.productList.length >= parseInt(res.data.pageNo)) {

this.finished = true

}

})

}, 1000)

},

onRefresh () {

this.finished = false

this.loading = true

this.pageNo = 0

this.onLoad()

}

}