vue實(shí)現(xiàn)觸底查詢功能

更新時間：2021年11月25日 12:59:19 作者：@洛飛

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)觸底查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)觸底查詢功能的具體代碼，供大家參考，具體內(nèi)容如下

1.使用vant-list組件相關(guān)內(nèi)容如下：

2.對象綁定值的默認(rèn)值：

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;
        }
      });
    },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實(shí)例代碼給出解決方法，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
vue2.0實(shí)現(xiàn)倒計(jì)時的插件(時間戳刷新跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計(jì)時的插件，刷新都會變成從頭再來，于是自己用vue2.0寫了一個，感覺還不錯，特此分享到腳本之家平臺供大家參考下
2017-03-03
Vue項(xiàng)目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項(xiàng)目時,需要引入一個第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報了這個問題,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下
2022-08-08
手把手教學(xué)vue的路由權(quán)限問題
這篇文章主要介紹了手把手教學(xué)vue的路由權(quán)限問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
Vue實(shí)現(xiàn)批量注冊全局組件的示例代碼
在項(xiàng)目開發(fā)中,我們經(jīng)常會封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊全局組件,感興趣的小伙伴可以了解下
2024-01-01
Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
開發(fā)Vue樹形組件的示例代碼
本篇文章主要介紹了開發(fā)Vue樹形組件的示例代碼，它展現(xiàn)了組件的遞歸使用。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
前端vue如何根據(jù)菜單自動生成路由(動態(tài)配置前端路由)
估計(jì)有不少人遇過這樣的需求:根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于前端vue如何根據(jù)菜單自動生成路由的相關(guān)資料,需要的朋友可以參考下
2024-04-04
基于Vue CSR的微前端實(shí)現(xiàn)方案實(shí)踐
這篇文章主要介紹了基于Vue CSR的微前端實(shí)現(xiàn)方案實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05