记住列表的滚动位置

移动端中，在tabs页面下的列表，如果没有一个固定的高度的话，那么手指滑动的时候，会相互影响，比如在a分类的列表滚动了一段距离，那么你切换到b列表下，会发现b分类下的列表也滑动了一段距离。

为什么列表滚动会相互影响？

因为他们并不是在自己内部滚动，而是整个body在滚动，无论你是在a频道还是在b频道，其实滚动的都是body元素

这里分享一个小技巧：如何快速找到哪个元素产生的滚动？

//把下边的代码粘贴到浏览器Console中敲回车，然后滚动界面，它会输出滚动的元素
function findScroller(element) {
    element.onscroll = function() { console.log(element)}
​
    Array.from(element.children).forEach(findScroller);
}
​
findScroller(document.body);

解决方案: 给每个列表设置独自的滚动区域  

给article-list.vue（文章列表组件）的最外层的div添加一个类样式：article-list  

<style scoped lang="less">
.article-list {
  // 百分比单位是相对于父元素的
  // height: 100%;

// 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响
  // 1vw = 视口宽度的百分之一
  // 1vh = 视口高度的百分之一
  height: 79vh;
  overflow-y: auto;
}
</style>