vant之van-list的使用及踩坑記錄

更新時間：2022年04月25日 11:32:26 作者：Rayong有分享

這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

第一步：要使用vant組件

安裝好vant，npm i vant -S

第二步：在你要用到的地方js中引入

或者在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ù)加載完畢，然后進行是否進行加載關閉
                   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)：