vue實現觸底查詢功能
本文實例為大傢分享瞭vue實現觸底查詢功能的具體代碼,供大傢參考,具體內容如下
1.使用vant-list組件相關內容如下:
2.對象綁定值的默認值:
3.查詢方法:
完整代碼:
methods: { getdata() { let status=3; this.queryParams.params={ status:status, passFactory: this.$store.state.user.werksName } let params = JSON.parse(JSON.stringify(this.queryParams)); api.getPageList(params).then((res) => { if (res.success) { this.dataList = res.data.content; } else { Toast.fail({ message: res.msg }); } }); }, onLoad() {//觸底查詢 this.queryParams.page += 1; let _this = this; let status=3; this.queryParams.params={ status:status, passFactory: this.$store.state.user.werksName } let params = JSON.parse(JSON.stringify(this.queryParams)); api.getPageList(params).then((res) => { if(res.success){ this.dataList = this.dataList.concat(res.data.content); if (this.dataList.length >= res.data.totalElements) { this.finished = true; } else { this.finished = false; } this.loading = false; } }); },
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vuex結合session存儲數據解決頁面刷新數據丟失問題
- vant-list上拉加載onload事件觸發多次問題及解決
- Vue項目如何保持用戶登錄狀態(localStorage+vuex刷新頁面後狀態依然保持)
- vue 請求攔截器的配置方法詳解
- Vue登錄功能的實現流程詳解