本篇内容主要讲解“怎么使用Vant实现数据分页和下拉加载”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Vant实现数据分页和下拉加载”吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vant数据分页，下拉加载</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.11/lib/index.css" rel="external nofollow" /> </head> <style> </style> <body> <div id='app'> <van-list class="lazy" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"> <div v-for="(item,index) in list" :key="index">{{item}}</div> </van-list> </div> </body> <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script> <script> var Vue = new Vue({ el: '#app', data: { list: [], page: 1, loading: false, finished: false, num: 0 }, created() { this.getList() }, mounted() { }, methods: { // 请求公共方法 ajax(url, params, cb) { $.ajax({ type: 'post', url: url, data: params, dataType: "json", success: function (response) { cb(response) } }); }, onLoad() { this.getList() }, getList() { let that = this that.ajax('url', { kay: 'value' }, function (res) { if (res.errcode != 0) { that.$toast(res.msg) return false } if (that.page == 1) { that.list = res.data.list } else { that.list = that.list.concat(res.data.list) } that.loading = false; that.page++ //最后一次请求返回的数据为空或小于10条，不在请求，finished = true //根据业务需求更改 if (res.data.list.length == 0 || res.data.list == null || res.data.list.length < 10) { that.finished = true return } }) } } }) </script> </html>
注意：
v-model 每次数据加载完成要置为false
finished 置为false后将不再触发下拉加载
immediate-check 置为false后，每次进入页面将不会触发load方法，防止进入页面多次加载
1.html
<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了呦" @load="onLoad" > </van-list> </van-pull-refresh>
2.js
return {
isLoading: false,
loading: false,
page: 1,
limit: 10,
finished: false,
total: 0, // 总共的数据条数
List: [],
}
getHistory() {
const historyData = {
page: this.page,
limit: this.limit
}
return new Promise((resolve, reject) => {
getHistory(historyData)
.then(res => {
if (res.code === 0) {
console.log(res, '历史记录')
this.total = res.data.total
this.finished = !res.data.hasNext
if (res.data.list && res.data.list.length > 0) {
const tempList = res.data.list
// console.log(this.page)
if (this.page > 1) {
this.list = this.list.concat(tempList)
} else {
this.list = tempList // 第一次加载
}
this.page += 1
} else {
this.list = []
}
this.loading = false
resolve()
}
})
.catch(error => {
reject(error)
})
})
},
onLoad() {
this.getHistory()
},
onRefresh() {
this.page = 1
setTimeout(() => {
this.getHistory()
Toast('刷新成功')
this.isLoading = false
}, 1000)
},到此，相信大家对“怎么使用Vant实现数据分页和下拉加载”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
