快捷導(dǎo)航

vant之關(guān)于van-list的使用以及一些坑的解決方案

更新時間：2023年06月06日 11:41:17 作者：Rayong有分享

這篇文章主要介紹了vant之關(guān)于van-list的使用以及一些坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant之van-list的使用及一些坑的解決

第一步，要使用vant組件，安裝好vant，npm i vant -S

第二步，在你要用到的地方j(luò)s中引入，或者在src/main.js里面引入

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

這里我引入的地方是我要用到的js文件中

第三步，在template中引用

第四步，js中重要代碼

data(){
    return{
      content_list: [],
      	loading: false,//加載狀態(tài)
      	finished: false,//是否加載
      	count_page: 1,//加載頁數(shù)
　　　	count_num: 4//每頁限制條數(shù)
    }
 },
  methods:{
     list_onload_more: function () {
          var _this = this;
          _this.count_page += 1;
          // 請求數(shù)據(jù)
          _this.get_course_list();
      }
      ，get_course_list:function(){
      	   var _this = this;
		   var params ={};
           params.page = _this.count_page;
           params.num = _this.count_num;
           index_rpc.get_collection_course(params,function (data) {
               if(data.error_code == 0) {
                   var item = data.data || [];
                   _this.count = data.count;
                   if (params.count_page == 1){
                       _this.content_list = [];
                   }
                   item.forEach(function(val) {
                       _this.content_list.push(val);
                   })
                   //這里是用于判斷什么時候所有數(shù)據(jù)加載完畢，然后進行是否進行加載關(guān)閉
                   if(_this.count_num * _this.count_page >= _this.count) {
                       _this.finished = true;
                   }else {
                       _this.finished = false;
                   }
               }else{
                   _this.count = 0;
                   _this.content_list = [];
                   _this.finished = true;
               }
               //最后數(shù)據(jù)加載完后不要忘記將loading改為false
               _this.loading = false;
           })
      }
  }

兩個事情跳轉(zhuǎn)：

第五步，解決遇到的坑

這里我講一下我遇到的一些關(guān)于該組件的問題解決方法。

首先， onload在加載時只觸發(fā)一次，頁面向下滾動時，onload并不加載，你可以在獲取數(shù)據(jù)的時候手動在前面加一個_this.loading = false。

其次，如果數(shù)據(jù)一次全加載完了，說明你表格渲染的高度沒有固定，或者是高度被撐開了，所以才會導(dǎo)致數(shù)據(jù)會一次加載完畢。設(shè)置100%也無效，這時你要設(shè)置高度。

然后如果一直顯示加載中，無法關(guān)閉，這時你要在獲取數(shù)據(jù)里面做一個判斷，判斷數(shù)據(jù)是否已經(jīng)全部獲取，獲取了就給_this.finished = true,即關(guān)閉加載。

最后，就是css樣式問題，列表元素使用了float需要使用類名vant-clearfix清除float，否則會出現(xiàn)請求被多次觸發(fā)的問題。

vant使用van-list組件問題

使用vant組件庫實現(xiàn)列表的下拉刷新與上拉加載

使用的組件：van-pull-refresh（下拉刷新）與van-list（瀑布流滾動加載，用于展示長列表）
list里面循環(huán)需要展示的數(shù)據(jù)即可

大概的html代碼如下：

?<van-pull-refresh v-model="refreshing" @refresh="'onRefresh">
? ? ? ? <van-list v-model="loading" @load="onLoad" :finished="finished">
? ? ? ? ? ? <div v-for="(item,i) in list" :key="'i"></div>
? ? ? ? </van-list>
?</van-pull-refresh>

我們可以把參數(shù)寫在data里面

data(){
? ? return{
? ? ? list:[],
? ? ? loading:false,
? ? ? refreshing:false,
? ? ? finished；false,
? ? ? total:0,
? ? ? params:{
? ? ? ? pageNum:0,
? ? ? ? pageSize:10,
? ? ? ? keyword:'',
? ? ? ? id:''
? ? ? }
? ? }
}

設(shè)置參數(shù)，可以通過方法來更改接口所需要的參數(shù)

setParams(newParams){
? this.params = Object.assign(this.params,newParams)
}

獲取列表數(shù)據(jù)

async getList(type) {
? ? ? let res = await quesAnsFirPage(this.params);
? ? ? if (res.status == “success“) {
? ? ? ? let { rows, total } = res.content;
? ? ? ? this.total = total;
? ? ? ? //當下拉刷新請求數(shù)據(jù)時，list直接等于新獲取的數(shù)據(jù)
? ? ? ? //當上拉加載時怎拼接數(shù)據(jù)
? ? ? ? if (type == “refresh“) {
? ? ? ? ? this.list = rows;
? ? ? ? } else {
? ? ? ? ? this.list = this.list.concat(rows);
? ? ? ? }
? ? ? }
? ? },?

上拉刷新

?async onLoad() {
? ? ? let params = {
? ? ? ? pageNum: ++this.params.pageNum
? ? ? };
? ? ? this.setParams(params);
? ? ? await this.getList();
? ? ? this.loading = false;
? ? ? if (this.list.length == this.total) {
? ? ? ? this.finished = true;
? ? ? }
? ? },

下拉加載

async onRefresh() {
? ? ? let params = {
? ? ? ? pageNum: 1
? ? ? };
? ? ? this.setParams(params);
? ? ? await this.getList(“refresh“);
? ? ? this.finished = false;
? ? ? this.refreshing = false;
? ? },?