vant之van-list的使用及踩坑记录
作者:Rayong有分享 时间:2023-07-02 16:48:41
第一步:要使用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
标签:vant,van-list


猜你喜欢
分析python服务器拒绝服务攻击代码
2021-07-21 20:47:29
无忧贴子管理器(ListView组件)
2009-01-02 17:56:00
Server 对象 错误 ASP 0177 800401f3 的解决方案 Server 对象 错误 ASP 0177 800401f3
2009-07-28 17:57:00
javascript十个最常用的自定义函数(中文版)
2024-04-16 09:26:38
女神相册密码忘记了 我只用Python写了20行代码
2021-05-01 13:27:11

前端图片懒加载的原理与3种实现方式举例
2024-04-17 10:20:02

python3使用腾讯企业邮箱发送邮件的实例
2023-09-29 14:31:05

python之array赋值技巧分享
2021-11-23 17:16:55
python geemap的安装步骤及环境配置
2023-05-13 18:07:35

python脚本和网页有何区别
2023-04-01 21:24:10
python异步任务队列示例
2021-05-04 03:09:07
Python基于百度AI实现OCR文字识别
2023-09-26 22:14:29

关于axios如何全局注册浅析
2024-04-27 16:03:40
pandas去重复行并分类汇总的实现方法
2021-06-12 17:38:37

最适合人工智能开发的5种编程语言 附人工智能入门书籍
2023-06-02 03:15:18

django之状态保持-使用redis存储session的例子
2023-07-29 20:14:07
python 根据字典的键值进行排序的方法
2023-10-07 00:07:56

python中字符串数组逆序排列方法总结
2023-04-18 07:19:08
Mysql动态更新数据库脚本的示例讲解
2024-01-23 11:22:49
python实现布隆过滤器及原理解析
2023-03-11 15:01:20
