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,//加载状态
     finished: false,//是否加载
     count_page: 1,//加载页数
count_num: 4//每页限制条数
   }
},
 methods:{
    list_onload_more: function () {
         var _this = this;
         _this.count_page += 1;
         // 请求数据
         _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);
                  })
                  //这里是用于判断什么时候所有数据加载完毕，然后进行是否进行加载关闭
                  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;
              }
              //最后数据加载完后不要忘记将loading改为false
              _this.loading = false;
          })
     }
 }

两个事情跳转：

第五步：解决遇到的坑

这里我讲一下我遇到的一些关于该组件的问题解决方法。

首先， onload在加载时只触发一次，页面向下滚动时，onload并不加载，你可以在获取数据的时候手动在前面加一个_this.loading = false。

其次，如果数据一次全加载完了，说明你表格渲染的高度没有固定，或者是高度被撑开了，所以才会导致数据会一次加载完毕。设置100％也无效，这时你要设置高度。

然后如果一直显示加载中，无法关闭，这时你要在获取数据里面做一个判断，判断数据是否已经全部获取，获取了就给_this.finished = true,即关闭加载。

最后，就是css样式问题，列表元素使用了float需要使用类名vant-clearfix清除float，否则会出现请求被多次触发的问题。

来源：https://blog.csdn.net/qq_43025587/article/details/108141630