点击tab栏，内容区域滚动到相应的位置，内容区域滚动，tab栏自动定位

html代码：其中滚动区域是id=“imgMain”，Tab区域是class=“functions-main-tabs”

<template>
  <vantDrawer v-bind="$attrs" v-on="$listeners" title="免费功能">
    <div class="functions">
      <div class="functions-main">
        <Tabs class="functions-main-tabs" v-model="activeTabs" :ellipsis="false" color="#2970FF" title-active-color="#2970FF" @click="changeTab">
          <Tab v-for="item in tabArr" :key="item.id" :title="item.name"></Tab>
        </Tabs>
        <div id="imgMain" class="functions-main-img">
          <img id="img-0" src="../img/function_8.png">
          <img id="img-1" src="../img/function_22.png">
          <img id="img-2" src="../img/function_17.png">
          <img id="img-3" src="../img/function_10.png">
          <img id="img-4" src="../img/function_16.png">
        </div>
      </div>
    </div>
  </vantDrawer>
</template>

JS部分

<script>
import vantDrawer from '@/components/vantDrawer'
import { Tab, Tabs } from 'vant'
export default {
  data () {
    return {
      activeTabs: 0,
      tabArr: [{
        id: 0,
        name: 'tab 1'
      }, {
        id: 1,
        name: 'tab 2'
      }, {
        id: 2,
        name: 'tab 3'
      }, {
        id: 3,
        name: 'tab 4'
      }, {
        id: 4,
        name: 'tab 5'
      }],
      firstLoad: true,
      positionList: []
    }
  },
  mounted () {
    this.activeTabs = 0
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
   // 点击tab，内容区域定位到对应的部分
    changeTab (e) {
      this.activeTabs = e
      this.scrollToReward(this.activeTabs)
    },
    // 监听内容滚动
    init () {
      if (document.getElementById('imgMain')) {
        document.getElementById('imgMain').addEventListener('scroll', this.handScroll)
        setTimeout(() => {
          this.getScroll()
        }, 500)
      } else {
        setTimeout(() => {
          this.init()
        }, 300)
      }
    },
    getScroll () {
      this.positionList = []
      const main = document.getElementById('imgMain')
      const defaulltTop = main.offsetTop ? main.offsetTop : 0
      main.childNodes.forEach(item => {
        this.positionList.push(item.offsetTop + defaulltTop)
      })
    },
    handScroll (e) {
      const scrollTop = e.target.scrollTop
      const findNearIndex = (ST) => {
        let min = null
        let index = 0
        this.positionList.forEach((item, i) => {
          const distance = Math.abs(ST - item)
          if (min) {
            if (distance < min) {
              min = distance
              index = i
            }
          } else {
            min = distance
          }
        })
        return index
      }
      const index = findNearIndex(scrollTop)
      this.activeTabs = index
    },
    scrollToReward (tab) {
      const imgElement = document.getElementById(`img-${tab}`)
      const imgMain = document.getElementById('imgMain')
      if (imgElement && imgMain) {
        const top = imgElement.offsetTop
        Math.animation(imgMain.scrollTop, top, 300, 'Quad.easeOut', value => {
          imgMain.scrollTo(0, value)
        })
      }
    },
    buyPackage () {
      this.$router.push({ name: 'albumPackage', query: { orderFrom: '124' } }).catch(err => err)
    }
  },
  components: {
    vantDrawer,
    Tab,
    Tabs
  }
}
</script>

CSS部分

<style lang="less" scoped>
.functions {
  display: flex;
  flex-direction: column;
  width: 96%;
  min-height: 360px;
  height: 75vh;
  margin: 0 auto;
  padding-bottom: 20px;
  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  &-main {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    height: calc(~'100% - 54px');
    &-tabs {
      height: 50px;
      flex-shrink: 0;
    }
    &-img {
      position: relative;
      width: 100%;
      flex-shrink: 1;
      height: 100%;
      overflow-y: scroll;
      img {
        width: 100%;
      }
    }
  } 
}
</style>