Vue3从0到1组件开发-业务组件：分类列表与预加载

这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

问题由来

这篇文章的主题并非是我在工作中遇到的，而是在学习群里一位群友提到的一个问题。

如图，在Bilibili的首页，有多个分类，默认渲染首页首屏的内容，但是通过移动端的手势操作左右滑动时，未加载的部分默认是空白的。

WB1ZVGP)RL(9)}}YUJ3F.jpg

待加载数据过后再次滑动效果如上。

而群友则希望默认时左右滑动效果就如此，所以在最开始就判断是否可以预加载左右两侧分类的内容。

当时看到这一提问时，我第一反应是先渲染一个骨架屏，之后在通过当前所在分类的索引，以及左右两侧分类的数据是否已请求，未请求的话，则静默请求并渲染进对应的分类里。

云实现一下。

既然要实现这一效果的话，那么首先结构部分就是需要渲染好分类以及内容容器了。

这里框架主题结构用vant的组件来搭建。

<van-tabs v-model="active" swipeable> 
    <van-tab v-for="index in 4" :title="'选项 ' + index" :key="index"> 
        <van-skeleton title :row="3" />
    </van-tab> 
</van-tabs>

真实项目中对于骨架屏的样式肯定是更贴近于真实渲染后布局的，这里写个毛坯房，大家可以根据真实情况修改。

内容的部分初步处理好了之后，就是考虑预加载的部分了。

真实项目来讲，其实做到这里就可以了。预加载的部分可能用户会直接点击进入自己喜欢的频道，而导致浪费了加载的性能。

预加载内容

预加载的部分最直接的就是判断当前索引，以及当前所有的左右两边是否是存在符合预加载的条件的。

同时使用一个公共变量存储已经预加载以及已经访问的界面。

data(){
  return {
    loadingList: {hot: false, food: false, other: false},
    category: [hot, food, other]
  }
},
methods: {
  switch(index){
      this.loadingList[this.category[index]] = true;
  },
  load(index, preload = true){
    this.request(`/categoyr/data/${this.category[index]}`;
    this.switch(index);
    if(preload){
    // 预加载左右两侧，但是再次请求时不会继续判断
      if(index > 0 && index < this.category.length && this.loadingList[this.category[index - 1]){
          this.load(index - 1, false)
      }
      if(index > 0 && index < this.category.length && this.loadingList[this.category[index + 1 1]){
          this.load(index + 1, false)
      }
    }
  }
}

不过这方案还只是我的设想，真实开发时，未访问的界面一般都是不渲染，减少性能消耗的，如果要做的话，肯定要做一些优化处理。