Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

之前用vue2的时候，写过vue2的用法，文末扩展知识点击查看,用得挺好的，也没啥问题，照葫芦画瓢的做出来了，但是有问题，下滑之后调用多次数据，按理说

组件通过 loading 和 finished 这俩变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

但是我打印了一下，在调用方法的时候没有把loading设置为true，还是false，后来才发现，和vue2还是有区别的，不能直接用v-model，得用v-model:loading，还是得看手册啊，不能老看之前做的项目

具体代码如下：

页面：<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: [], //产品列表数据 
      nodata: "", 
      page: 1, //页码
      pageSize: 20, //每页条数
})
 
 //获取数据
const getList = ()=>{
    
    let params = {
        pageNo:state.page,
        pageSize:state.pageSize
    };
    axios.getdata(params).then((res:any) => {
        if (res.code == 200) {
　　　　　　　　　　　　state.page ++;   //页数+1

　　　　　　　　　　　　loading.value = false;  // 加载状态结束
                    state.proList = state.proList.concat(res.data);
                    //判断是否是最后一页
                    if (res.data.length < state.pageSize) {
                        finished.value = true ;
                        state.nodata = "已经到底了";
                    }
                    if (state.proList.length == 0) {
                        finished.value = true;
                        state.nodata = "暂无数据";
                    } 

          }
    })
} 
</script>

扩展知识点：

Vue插件—vant当中van-list的使用

先看官网  点这里

1、安装

npm i vant -S

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

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

3、使用  teamplate

//van-list  是必须带的标签，里面的标签可以自己加
　　<van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多啦"
        @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,//加载状态
      finished: false,//是否加载
      page: 1,//页数
　　　 limit: 15//条数
    }
  },
 methods:{
    load_more: function() {
      this.page += 1;//页数+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){
            // 加载状态结束
            this.loading = false;
            this.list = this.list.concat(res.data.data.list);//追加数据
            if (res.data.data.page == res.data.data.pageNum || res.data.data.list.length == 0) {  //数据全部加载完成
              this.finished = true;
            }else{
              this.finished = false;
            }
          }
        })
      }
}
}

另外注意css，因为滑动加载，看你滑动的是不是当前模块，如果滑动的不是当前的模块，是父元素或者其他的元素，不会触发加载事件，也不会请求数据　　　　

到此这篇关于Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题的文章就介绍到这了,更多相关Vue3 vant ts 上滑加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！