van list,vant实现表格

　　本文主要介绍vant的van-list的使用和踩坑记录，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

第一步：要使用vant组件

　　安装vant，npm i vant -S

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

　　或者在src/main.js中介绍

　　从“Vue”导入Vue；

　　从“vant”导入{ List }；

　　Vue.use(列表)；

　　我这里介绍的地方是在我要用的js文件里。

第三步：在template中引用

第四步：js中重要代码

　　data(){

　　返回{

　　内容列表：[]，

　　Loading: false，//加载状态

　　完成：false，//是否加载

　　Count_page: 1，//加载的页数

　　Count_num: 4//限制每页的文章数量

　　}

　　},

　　方法：{

　　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

　　}否则{

　　_ this.finished=false

　　}

　　}否则{

　　_ this . count=0；

　　_ this . content _ list=[]；

　　_ this.finished=true

　　}

　　//加载完最后一个数据后，不要忘记将loading改为false。

　　_ this.loading=false

　　})

　　}

　　}

　　两件事跳跃着：

第五步：解决遇到的坑

　　这里，我来说说我用这个组件遇到的问题的一些解决方法。

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

　　其次，如果数据是一次加载满的，说明你的表格渲染的高度不是固定的，或者高度是拉伸的，所以数据会一次加载。设置100%也不行，得设置高度。

　　那么，如果它一直显示正在加载，无法关闭，那么你就要在获取数据方面做出判断，确定是否已经获取了所有的数据。如果获得，则give _this.finished=true，即关闭加载。

　　最后是css样式问题。如果list元素使用float，就需要使用类名vant-clearfix来清除float，否则会多次触发请求。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。