vue点击tab列表滚动对应位置，滚动列表也可切换tab

妖狐艹你老母 2022-12-11 09:10 1133阅读 0赞

先看看效果：

![在这里插入图片描述][20200929172145374.gif_pic_center]

<template>
      <div class="custom-demo-view" style="padding: 1rem;">
        <div>
            <el-tabs v-if="reload" v-model="tabIndex" @tab-click="jump">
                <el-tab-pane :label="tabs[0].title" v-if="tabs[0].isShow" name="0"></el-tab-pane>
                <el-tab-pane :label="tabs[1].title" v-if="tabs[1].isShow" name="1"></el-tab-pane>
                <el-tab-pane :label="tabs[2].title" v-if="tabs[2].isShow" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="scroll-content" @scroll="onScroll" :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height">
            
            <div :ref="tabs[0].refName" class="scroll-item" style="padding-top: 1rem;">
                <div class="line-title">
                <h2>{
       {tabs[0].title}}</h2>
                </div>
                <div>
                    <p style="height:40px" v-for="item in [0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16]" :key="item">待发货符合规范化如故</p>
                </div>
            </div>
            
            <div :ref="tabs[1].refName" class="scroll-item" style="padding-top: 1rem;">
                <div class="line-title">
                <h2>{
       {tabs[1].title}}</h2>
                </div>
                <div>
                    <p style="height:40px" v-for="item in [0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16]" :key="item">新能说出的基本功发到你DNF不得发布</p>
                </div>
            </div>
            
            <div :ref="tabs[2].refName" class="scroll-item" style="padding-top: 1rem;top:5px;">
                <div class="line-title">
                <h2>{
       {tabs[2].title}}</h2>
                </div>
                <div>
                    <p v-for="item in [0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16]" :key="item">新水泥厂剧场版</p>
                </div>
            </div>
        </div>
      </div>
    </template>
     
    <script>
      export default {
        data() {
          return {
            reload: true,
            tabIndex: '0',
            contentStyleObj: {
              height: '100px'
            },
            tabs: [
              {
                isShow: true,
                title: '用户管理',
                refName: 'setOneRef'
              },
              {
                isShow: true,
                title: '配置管理',
                refName: 'setTwoRef'
              },
              {
                isShow: true,
                title: '角色管理',
                refName: 'setThreeRef'
              }
            ]
          }
        },
        methods: {
          refresh() {
            this.reload = false
            this.$nextTick(() => (this.reload = true))
          },
          // tab click
          jump(index, info) {
            let target = document.querySelector('.scroll-content')
            let scrollItems = document.querySelectorAll('.scroll-item')
            // 判断滚动条是否滚动到底部
            if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
              this.tabIndex = index.index.toString()
            }
            let totalY = scrollItems[index.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
            let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
            // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
            // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
            // 计算每一小段的距离
            let step = totalY / 50
            if (totalY > distance) {
              smoothDown(document.querySelector('.scroll-content'))
            } else {
              let newTotal = distance - totalY
              step = newTotal / 50
              smoothUp(document.querySelector('.scroll-content'))
            }
     
            // 参数element为滚动区域
            function smoothDown(element) {
              if (distance < totalY) {
                distance += step
                element.scrollTop = distance
                setTimeout(smoothDown.bind(this, element), 10)
              } else {
                element.scrollTop = totalY
              }
            }
     
            // 参数element为滚动区域
            function smoothUp(element) {
              if (distance > totalY) {
                distance -= step
                element.scrollTop = distance
                setTimeout(smoothUp.bind(this, element), 10)
              } else {
                element.scrollTop = totalY
              }
            }
          },
          // 滚动条滚动
          onScroll(e) {
            let scrollItems = document.querySelectorAll('.scroll-item')
            for (let i = scrollItems.length - 1; i >= 0; i--) {
              // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
              let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400
              if (judge) {
                this.tabIndex = i.toString()
                break
              }
            }
          },
          getHight() {
            this.contentStyleObj.height = (window.innerHeight - 190) + 'px'
          }
        },
        created() {
          this.getHight()
          window.addEventListener('resize', this.getHight)
        },
        destroyed() {
          window.removeEventListener('resize', this.getHight)
        },
      }
    </script>
    <style lang="less" scoped>
     
    </style>

[20200929172145374.gif_pic_center]: /images/20221123/22b5179e8bc44172aacf38846cff0a45.png