溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
