1 数据渲染

template

1
<van-list
2
  v-for="items in tabbar"
3
  :key="items.id"
4
  v-show="items.isActive"
5
  v-model="items.loading"
6
  :finished="items.finished"
7
  finished-text="没有更多了"
8
  @load="onLoad(items)"
9
  ref="listItem"
10
>
11
  <van-cell v-for="item in items.list" :key="item" :title="item">{{
12
    items.value
13
  }}</van-cell>
14
</van-list>

data

1
data() {
2
   return {
3
     tabbar: [
4
       {
5
         id: 1,
6
         value: "Lorem",
7
         isActive: true,
8
         loading: false,
9
         finished: false,
10
         list: [],
11
       },
12
       {
13
         id: 2,
14
         value: "Lorem2",
15
         isActive: false,
16
         loading: false,
17
         finished: false,
18
         list: [],
19
       },
20
       {
21
         id: 3,
22
         value: "Lorem3",
23
         isActive: false,
24
         loading: false,
25
         finished: false,
26
         list: [],
27
       },
28
     ],
29
   };
30
 },

methods

1
onLoad(obj) {
2
  // 异步更新数据
3
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
4
  setTimeout(() => {
5
    for (let i = 0; i < 10; i++) {
6
      obj.list.push(obj.list.length + 1);
7
    }
8
9
    console.log(obj.id);
10
    console.log(obj.finished);
11
12
    // 加载状态结束
13
    obj.loading = false;
14
15
    // 数据全部加载完成
16
    if (obj.list.length >= 40) {
17
      obj.finished = true;
18
    }
19
  }, 1000);
20
},
21
/**
22
 * 切换选项
23
 * obj  选项的数据
24
 */
25
onClickLoadData(obj) {
26
  this.tabbar.forEach((item) => {
27
    item.isActive = false;
28
  });
29
  obj.isActive = true;
30
},

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

这是为什么呢？

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

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

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

但是呢？

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

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

那么！

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

那么现在我就告诉你

超简单 一行代码搞定

官方给了一个 check方法

所以 我们就可以这样做

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

完美搞定

2.遇到的坑 记录于2020.07.07

1.问题

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

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

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

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

罪魁祸首

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

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

3. 解决问题

终于，找到了原因，接下来解决就很简单了。

方式一：把这个全局组件的懒加载去掉，改成不懒加载就好了。

方式二：把这个全局组件单独在这个页面引入一次。

注意：部分文章可能会在不就的将来更新

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！