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

目录

  • 使用Vant框架list组件的坑
    • 介绍
    • 特性
    • 聊一下使用list组件遇到的坑
  • vant中van-list的使用
    • 原代码

使用Vant框架list组件的坑
介绍
Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。
Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

特性
  • 提供 60 多个高质量组件,覆盖移动端各类场景
  • 性能极佳,组件平均体积不到 1kb(min+gzip)
  • 单元测试覆盖率 90%+,提供稳定性保障
  • 完善的中英文文档和示例
  • 支持 Vue 2 & Vue 3
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TypeScript
  • 支持 SSR
快速配置和具体介绍请去官方文档,Vant框架在Github上点赞众多,用起来发现还是很好用的,强力推荐
官方文档:https://vant-contrib.gitee.io/vant/#/zh-CN/home

聊一下使用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); },},};

效果图片:
使用Vant框架list组件遇到的坑及解决
文章图片

可是!你复制代码,发现,发现完全不好用!这个定时任务简直看不懂,触底加载简直毫无逻辑,通过几个小时的研究,发现问题所在居然是CSS!对,你没有听错!是CSS导致的!
下方代码,重点看css部分,JS部分,记住settimeout不要去掉,不要相信他的注释,业务写在settimeout里就可以了
解释一下这个css的含义,就是van-list需要给他定义一个高度,并且滚动自适应,这样在不填满高度或者是滚动触底的时候就可以完美的触发onLoad时间了,这里还有一个重点!就是van-list的父级也要定义一下高度,不然也是不行的!
至于业务一定要在settimeout中写业务才能有效,了解的大佬看到了帮忙解释一下,不是很明白


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

原代码


.pic-content {overflow-y: scroll; -webkit-overflow-scrolling: touch; .pic-box {/****************************修改前代码***************************/background-color: #fff; overflow: hidden; break-inside: avoid; box-sizing: border-box; margin-bottom: 0.7rem; padding: 0.8rem; width: 48%; height: 16rem; ~~float: left; ~~ /**************不能有float样式*************/margin: 1%; border-radius: 4px; /****************************修改前代码***************************/p:nth-of-type(1) {padding: 0.8rem 0; }p:nth-of-type(2) {color: red; }.pic-item {height: 11rem; flex-direction: column; justify-content: center; overflow: hidden; img {width: 100%; height: auto; border-radius: 4px; }}}}

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


.pic-content {overflow-y: scroll; -webkit-overflow-scrolling: touch; .pic-box {/************************ 修改后代码**************************/background-color: #fff; overflow: hidden; box-sizing: border-box; margin-bottom: 0.7rem; padding: 0.8rem; height: 16rem; border-radius: 4px; /************************ 修改后代码************************ **/p:nth-of-type(1) {padding: 0.8rem 0; }p:nth-of-type(2) {color: red; }.pic-item {height: 11rem; flex-direction: column; justify-content: center; overflow: hidden; img {width: 100%; height: auto; border-radius: 4px; }}}}

【使用Vant框架list组件遇到的坑及解决】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读