Project scene

The page has multiple tap bars to switch between displaying different content, and the one under each tap can be swiped up and down to see more content.

When switching the tap bar, record and retain the slide position of the content in the previous tap bar, so that when cutting back, you can continue browsing the page based on the previous slide position, rather than resetting to return to the top of the page.

Implementation scheme

Now that the scroll area is a common body, you need to set up a separate scroll area for each list

Core: Limit the height of the components in the content area, and the slide wheel slides only in that area

Home/parent component 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"> <! Channel - the list of articles components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < article - the list: channel ="item"></article-list> </van-tab> ... Omit other codeexport default {
  name: 'home',
  components: {
    ArticleList,// article-list-- the actual scroll area
  },
Copy the code

Set styles in the home/components/article-list.vue file

// Make the list of content articles under each tap create its own scrolling container, without affecting each other.artcile-list {
  height: 79vh;
  overflow: auto;
}
Copy the code