快捷導(dǎo)航

Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問(wèn)題(推薦)

更新時(shí)間：2022年12月28日 14:24:43 作者：西貝小小鳳

這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問(wèn)題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

之前用vue2的時(shí)候，寫(xiě)過(guò)vue2的用法，文末擴(kuò)展知識(shí)點(diǎn)擊查看,用得挺好的，也沒(méi)啥問(wèn)題，照葫蘆畫(huà)瓢的做出來(lái)了，但是有問(wèn)題，下滑之后調(diào)用多次數(shù)據(jù)，按理說(shuō)

組件通過(guò) loading 和 finished 這倆變量控制加載狀態(tài)，當(dāng)組件滾動(dòng)到底部時(shí)，會(huì)觸發(fā) load 事件并將 loading 設(shè)置成 true。此時(shí)可以發(fā)起異步操作并更新數(shù)據(jù)，數(shù)據(jù)更新完畢后，將 loading 設(shè)置成 false 即可。若數(shù)據(jù)已全部加載完畢，則直接將 finished 設(shè)置成 true 即可。

但是我打印了一下，在調(diào)用方法的時(shí)候沒(méi)有把loading設(shè)置為true，還是false，后來(lái)才發(fā)現(xiàn)，和vue2還是有區(qū)別的，不能直接用v-model，得用v-model:loading，還是得看手冊(cè)啊，不能老看之前做的項(xiàng)目

具體代碼如下：

頁(yè)面：<van-list
            v-model:loading="loading"    
            :finished="finished"    
            :finished-text="nodata"    
            :immediate-check="false"      
            @load="getList"    
            >

　　　　　　　　<div?
? ? ? ? ? ? ? ? v-for="item in proList"
? ? ? ? ? ? ? ? :key="item.Id"
? ? ? ? ? ? ? ? >
　　　　　　　　</div>

 </van-list>

<script lang="ts" setup>
onMounted(() => {
? ? getList();
})
const loading = ref(false);
const finished = ref(false);
const state = reactive<any>({?
? ? ? proList: [], //產(chǎn)品列表數(shù)據(jù)?
? ? ? nodata: "",?
? ? ? page: 1, //頁(yè)碼
? ? ? pageSize: 20, //每頁(yè)條數(shù)
})
?
?//獲取數(shù)據(jù)
const getList = ()=>{
? ??
? ? let params = {
? ? ? ? pageNo:state.page,
? ? ? ? pageSize:state.pageSize
? ? };
? ? axios.getdata(params).then((res:any) => {
? ? ? ? if (res.code == 200) {
　　　　　　　　　　　　state.page ++;? ?//頁(yè)數(shù)+1

　　　　　　　　　　　　loading.value = false;? // 加載狀態(tài)結(jié)束
? ? ? ? ? ? ? ? ? ? state.proList = state.proList.concat(res.data);
? ? ? ? ? ? ? ? ? ? //判斷是否是最后一頁(yè)
? ? ? ? ? ? ? ? ? ? if (res.data.length < state.pageSize) {
? ? ? ? ? ? ? ? ? ? ? ? finished.value = true ;
? ? ? ? ? ? ? ? ? ? ? ? state.nodata = "已經(jīng)到底了";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (state.proList.length == 0) {
? ? ? ? ? ? ? ? ? ? ? ? finished.value = true;
? ? ? ? ? ? ? ? ? ? ? ? state.nodata = "暫無(wú)數(shù)據(jù)";
? ? ? ? ? ? ? ? ? ? }?

? ? ? ? ? }
? ? })
}?
</script>

擴(kuò)展知識(shí)點(diǎn)：

Vue插件—vant當(dāng)中van-list的使用

先看官網(wǎng) 點(diǎn)這里

1、安裝

npm i vant -S

2、引入在src/main.js里面引入

import Vue from 'vue';
import { List } from 'vant';
Vue.use(List);

3、使用 teamplate

//van-list  是必須帶的標(biāo)簽，里面的標(biāo)簽可以自己加
　　<van-list
        v-model="loading"
        :finished="finished"
        finished-text="沒(méi)有更多啦"
        @load="load_more"
        class="publist"
      >
         <li v-for="(item,ing) of list" :key="ing">{{item.name}}</li>
       
      </van-list>

script

export default {
  name: 'Home',
  data(){
    return{
      list: [],
      loading: false,//加載狀態(tài)
      finished: false,//是否加載
      page: 1,//頁(yè)數(shù)
　　　 limit: 15//條數(shù)
    }
  },
 methods:{
    load_more: function() {
      this.page += 1;//頁(yè)數(shù)+1
      this.onLoad();
    },
    onLoad() {
        let data = {
        page: this.page,
        pageSize: this.limit
        }
        axios.post('api/test/xbxxf',data)
        .then(res => {
          if(res.data.code=200){   
            // 加載狀態(tài)結(jié)束
            this.loading = false;
            this.list = this.list.concat(res.data.data.list);//追加數(shù)據(jù)
            if (res.data.data.page == res.data.data.pageNum || res.data.data.list.length == 0) {  //數(shù)據(jù)全部加載完成
              this.finished = true;
            }else{
              this.finished = false;
            }        
          }  
        })
      }
}
}

另外注意css，因?yàn)榛瑒?dòng)加載，看你滑動(dòng)的是不是當(dāng)前模塊，如果滑動(dòng)的不是當(dāng)前的模塊，是父元素或者其他的元素，不會(huì)觸發(fā)加載事件，也不會(huì)請(qǐng)求數(shù)據(jù)　　　　

到此這篇關(guān)于Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問(wèn)題的文章就介紹到這了,更多相關(guān)Vue3 vant ts 上滑加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: