vant-UI 组件的List渲染列表多页列表切换不加载的问题

1 数据渲染

template

<van-list
  v-for="items in tabbar"
  :key="items.id"
  v-show="items.isActive"
  v-model="items.loading"
  :finished="items.finished"
  finished-text="没有更多了"
  @load="onLoad(items)"
  ref="listItem"
>
  <van-cell v-for="item in items.list" :key="item" :title="item">{{
    items.value
  }}</van-cell>
</van-list>

data

data() {
   return {
     tabbar: [
       {
         id: 1,
         value: "Lorem",
         isActive: true,
         loading: false,
         finished: false,
         list: [],
       },
       {
         id: 2,
         value: "Lorem2",
         isActive: false,
         loading: false,
         finished: false,
         list: [],
       },
       {
         id: 3,
         value: "Lorem3",
         isActive: false,
         loading: false,
         finished: false,
         list: [],
       },
     ],
   };
 },

methods

onLoad(obj) {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      obj.list.push(obj.list.length + 1);
    }

    console.log(obj.id);
    console.log(obj.finished);

    // 加载状态结束
    obj.loading = false;

    // 数据全部加载完成
    if (obj.list.length >= 40) {
      obj.finished = true;
    }
  }, 1000);
},
/**
 * 切换选项
 * obj  选项的数据
 */
onClickLoadData(obj) {
  this.tabbar.forEach((item) => {
    item.isActive = false;
  });
  obj.isActive = true;
},

切换页面会发现数据不会加载

这是为什么呢？

这是因为页面渲染的时候已经进行过加载了在点击切换按钮的时候并没有触发onload事件

那么你可能会说那点击的时候调用一次onLoad事件不就好了么？

对点击的时候调用一次onLoad是会触发调用

但是呢？

第一个问题：如果第一次加载的数据不足以铺满全屏，那么数据就不会继续加载了

第二个问题：如果你的数据已经全部加载结束了，但是你点击切换的时候由于你调用了onLoad事件。就还会触发。

那么！

你也许会问那该怎么做呢？

那么现在我就告诉你

超简单一行代码搞定

官方给了一个 check方法

所以我们就可以这样做

/**
 * 切换选项
 * obj  选项的数据
 */
onClickLoadData(obj) {
  this.tabbar.forEach((item) => {
    item.isActive = false;
  });
  obj.isActive = true;
+  this.$refs.listItem[obj.id - 1].check();检查点击的选项所显示的页面的滚动位置，若已滚动至底部，则会触发 load 事件  [obj.id - 1]为选中当前的list
},

完美搞定

2.遇到的坑记录于2020.07.07

1.问题

在第一次打开页面刷印，且是第一次下啦都底部进行加载请求的时候，请求了两次。之后，只要不刷新页面，就不会再出现一下请求两次的问题。

2.出现这个问题，让小编疑惑到怀疑人生

刚开始，还以为是自己代码逻辑写错了！就一直读之前写的代码，看vant的文档。最终发现，代码没有任何问题。在网上查找，由于问题不好描述，也没有查到相应的答案。痛苦至极

稳住心，开始在浏览器上测试，过一个小时左右时间的折腾，终于，找到了答案。

主要原因在于，下面下啦的内容是一个全局的懒加载组件，只有在使用到的时候，才会请求加载这个组件的js

可以看到，在第一次请求接口的完成后，才请求了这个js文件。之后由于页面还没有渲染，导致高度不够，所以就又请求了一次。