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

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

使用Vant框架list组件的坑

介绍

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

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

特性

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

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

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

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

• 支持 Vue 2 & Vue 3

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 typescript

• 支持 SSR

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

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

<van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">  <van-cell v-for="item in list" :key="item" :title="item" /></van-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中写业务才能有效，了解的大佬看到了帮忙解释一下，不是很明白

<div class="txtc" ><van-list         v-model="loading"        :finished="finished"        finished-text="没有更多了"        @load="onLoad"      >        <div class="divinfo" v-for="item in tableData" :key="item.sid"></div></van-list></div>

vant中van-list的使用

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

原代码

<template>  <div class="about">    <van-tabs v-model="active" sticky @change="getTypeDate">      <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">        <div : class="pic-content">          <van-list            :finished="finished"            :finished-text="finishedText"            v-model="loading"            :offset="10"            :immediate-check="false"            @load="getserviceList"          >          <!------------------------------------------------- 修改前代码 --------------------------------------------->                            <!------------------------------------------------- 修改前代码 --------------------------------------------->          </van-list>        </div>      </van-tab>    </van-tabs>  </div></template>

<script>import { Tab, Tabs, List, Cell, Row, Col } from "vant";import { FetchServeType, FetchServeList } from "../apis/serve.js";export default {  data() {    return {      active: 0,      typeList: [],      serviceList: [],      type: "",      finishedText: "",      finished: false,      pageNum: 1,      pageSize: 10,      contentHeight: 0,      loading: false    };  },  mounted() {    this.getOrderStyle();    this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";  },  methods: {    async getOrderStyle() {      let res = await FetchServeType();      if (res.data && res.data.success) {        this.typeList = res.data.data;        this.type = res.data.data[0].name;        this.getTypeDate();      }    },    getTypeDate() {      this.pageNum = 1;      this.type = this.typeList[this.active].name;      this.serviceList = [];      this.finishedText = "";      this.finished = false;      this.getserviceList();    },    async getserviceList() {      let toast = this.$toast.loading({        mask: true,        message: "加载中..."      });      const { type, pageNum, pageSize } = this;      let params = {        type,        pageNum,        pageSize      };      let res = await FetchServeList(params);      this.loading = false;      toast.close();      if (res.data && res.data.success) {        let list = (res.data.data && res.data.data.list) || [];        if (pageNum > 1) {          this.serviceList = [...this.serviceList, ...list];        } else {          this.serviceList = list;        }        // 如果当前页数 = 总页数，则已经没有数据        if (res.data.data.pageNum === res.data.data.pages) {          this.finished = true;          this.finishedText = "- 没有更多了-";        }        // 如果总页数大于当前页码，页码+1        if (res.data.data.pages > pageNum) {          this.pageNum++;        }      }      console.log("FetchServeList: ", this.serviceList);    }  }};</script>

<style lang="scss" scoped>.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;~~     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;      }    }  }}</style>

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

<template>  <div class="about">    <van-tabs v-model="active" sticky @change="getTypeDate">      <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">        <div : class="pic-content">          <van-list            :finished="finished"            :finished-text="finishedText"            v-model="loading"            :offset="10"            :immediate-check="false"            @load="getserviceList"          >          <!------------------------------------------------- 修改后代码 --------------------------------------------->                        <!------------------------------------------------- 修改后代码 --------------------------------------------->          </van-list>        </div>      </van-tab>    </van-tabs>  </div></template>

<script>import { Tab, Tabs, List, Cell, Row, Col } from "vant";import { FetchServeType, FetchServeList } from "../apis/serve.js";export default {  data() {    return {      active: 0,      typeList: [],      serviceList: [],      type: "",      finishedText: "",      finished: false,      pageNum: 1,      pageSize: 10,      contentHeight: 0,      loading: false    };  },  mounted() {    this.getOrderStyle();    this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";  },  methods: {    async getOrderStyle() {      let res = await FetchServeType();      if (res.data && res.data.success) {        this.typeList = res.data.data;        this.type = res.data.data[0].name;        this.getTypeDate();      }    },    getTypeDate() {      this.pageNum = 1;      this.type = this.typeList[this.active].name;      this.serviceList = [];      this.finishedText = "";      this.finished = false;      this.getserviceList();    },    async getserviceList() {      let toast = this.$toast.loading({        mask: true,        message: "加载中..."      });      const { type, pageNum, pageSize } = this;      let params = {        type,        pageNum,        pageSize      };      let res = await FetchServeList(params);      this.loading = false;      toast.close();      if (res.data && res.data.success) {        let list = (res.data.data && res.data.data.list) || [];        if (pageNum > 1) {          this.serviceList = [...this.serviceList, ...list];        } else {          this.serviceList = list;        }        // 如果当前页数 = 总页数，则已经没有数据        if (res.data.data.pageNum === res.data.data.pages) {          this.finished = true;          this.finishedText = "- 没有更多了-";        }        // 如果总页数大于当前页码，页码+1        if (res.data.data.pages > pageNum) {          this.pageNum++;        }      }      console.log("FetchServeList: ", this.serviceList);    }  }};</script>

<style lang="scss" scoped>.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;      }    }  }}</style>

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