使用Vant框架list组件遇到的坑怎么解决

本篇内容介绍了"使用Vant框架list组件遇到的坑怎么解决"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

使用Vant框架list组件的坑

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。

Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

特性

• 提供 60 多个高质量组件，覆盖移动端各类场景

• 性能极佳，组件平均体积不到 1kb（min+gzip）

• 单元测试覆盖率 90%+，提供稳定性保障

• 完善的中英文文档和示例

• 支持 Vue 2 & Vue 3

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 TypeScript

• 支持 SSR

聊一下使用list组件遇到的坑

官方文档的实例代码是这样的：

  export default {  data() {    return {      list: [],      loading: false,      finished: false,    };  },  methods: {    onLoad() {      // 异步更新数据      // setTimeout 仅做示例，真实场景中一般为 ajax 请求      setTimeout(() => {        for (let i = 0; i < 10; i++) {          this.list.push(this.list.length + 1);        }        // 加载状态结束        this.loading = false;        // 数据全部加载完成        if (this.list.length >= 40) {          this.finished = true;        }      }, 1000);    },  },};

效果图片：

可是！你，发现，发现完全不好用！这个定时任务简直看不懂，触底加载简直毫无逻辑，通过几个小时的研究，发现问题所在居然是CSS！对，你没有听错！是CSS导致的！

下方代码，重点看css部分，JS部分，记住settimeout不要去掉，不要相信他的注释，业务写在settimeout里就可以了

解释一下这个css的含义，就是van-list需要给他定义一个高度，并且滚动自适应，这样在不填满高度或者是滚动触底的时候就可以完美的触发onLoad时间了，这里还有一个重点！就是van-list的父级也要定义一下高度，不然也是不行的！

至于业务一定要在settimeout中写业务才能有效，了解的大佬看到了帮忙解释一下，不是很明白

vant中van-list的使用

van-list里面的元素不能有float样式，否则会连续触发 load 事件

原代码

// 修改后代码(注释部分为修改后代码)

"使用Vant框架list组件遇到的坑怎么解决"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！