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,//加载状态
      	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,否则会出现请求被多次触发的问题。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue之创建项目及目录方式

    Vue之创建项目及目录方式

    这篇文章主要介绍了Vue之创建项目及目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue控制多行文字展开收起的实现示例

    vue控制多行文字展开收起的实现示例

    这篇文章主要介绍了vue控制多行文字展开收起的实现示例(也叫控制文字展开隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue使用echarts实现中国地图和点击省份进行查看功能

    vue使用echarts实现中国地图和点击省份进行查看功能

    这篇文章主要介绍了vue使用echarts实现中国地图和点击省份进行查看功能,本文通过实例代码给大家详细讲解,对vue echarts 中国地图相关知识感兴趣的朋友一起看看吧
    2022-12-12
  • Vue冷门技巧递归组件实践示例详解

    Vue冷门技巧递归组件实践示例详解

    这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue项目中Api的组织和返回数据处理的操作

    Vue项目中Api的组织和返回数据处理的操作

    这篇文章主要介绍了Vue项目中Api的组织和返回数据处理的操作,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    这篇文章主要介绍了Vue使用babel-polyfill兼容IE解决白屏及语法报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3中操作dom的四种方式总结(建议收藏!)

    Vue3中操作dom的四种方式总结(建议收藏!)

    VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue.js 递归组件实现树形菜单(实例分享)

    Vue.js 递归组件实现树形菜单(实例分享)

    本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧
    2016-12-12
  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    这篇文章主要介绍了使用Typescript封装一个Vue组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue.js前端网页弹框异步行为示例分析

    vue.js前端网页弹框异步行为示例分析

    这篇文章主要为大家介绍了vue.js前端网页弹框异步的行为示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助祝大家多多进步,早日升职加薪
    2021-11-11

最新评论