保留不同tap栏下的内容滚动位置

项目场景

页面有多个tap栏切换来展示不同内容，每个tap栏下的可以进行上下滑动来查看更多的内容。

当切换tap栏时，要记录并保留上一个tap栏内容的滑动位置，这样再切回去的时候，可以根据上次滑动的位置继续浏览页面，而不是重置返回页面顶部。

实现方案

思路：现在滚动区域是公共的body，需要给每个列表设置独自的滚动区域

核心：把内容区组件的高度限死，滑动滚轮就只在该区间进行滑动

父组件 home/index.vue

<template>
  <div class="home-container">
    <van-tabs class="channel-tabs" v-model="active" animated swipeable>
      <van-tab :key="item.id" v-for="item in channels" :title="item.name">
        <!-- 频道的文章列表组件----------------------------------------- -->
        <article-list :channel="item"></article-list>
      </van-tab>
      ...省略其他代码
      
export default {
  name: 'home',
  components: {
    ArticleList,// article-list--实际滚动区域
  },

在home/components/article-list.vue文件中 设置样式

// 让每个tap下的内容文章列表产生自己的滚动容器，相互不影响
.artcile-list {
  height: 79vh;
  overflow: auto;
}