VUE 页面加载的时候，滚动导航到指定位置

今天药忘吃喽~ 2022-09-09 00:20 62阅读 0赞

<template>
        <section class="wrapper" ref="wrapper">
            <div class="tab-wrapper">
                <el-tabs
                    v-model="activeTab"
                    @tab-click="handleChangeTab"
                    :tab-position="tabPosition"
                >
                    <el-tab-pane label="基础信息" name="base"/>
                    <el-tab-pane label="销售信息" name="sale"/>
                    <el-tab-pane label="商品规格" name="spec"/>
                    <el-tab-pane label="图文描述" name="desc"/>
                </el-tabs>
            </div>
            <div class="content-wrapper" ref="scrollWrapper">
                <div class="form-item" ref="base">
                    <div class="title">基础信息</div>
                </div>
                <div class="form-item" ref="sale">
                    <div class="title">销售信息</div>
                </div>
                <div class="form-item" ref="spec">
                    <div class="title">商品规格</div>
                </div>
                <div class="form-item" ref="desc">
                    <div class="title">图文描述</div>
                </div>
            </div>
        </section>
    </template>
    
    <script>
    import VueScrollTo from 'vue-scrollto';
    
    export default {
        components: {},
        data() {
            return {
                activeTab: 'base',
                tabPosition: 'right'
            };
        },
        mounted() {
    	 // 监听滚动事件
            this.$refs.scrollWrapper.addEventListener('scroll', this.handleScroll, true);
        },
    
        methods: {
    		// 点击事件
            handleChangeTab() {
                VueScrollTo.scrollTo(this.$refs[this.activeTab], 500, {
                    container: '.content-wrapper',
                    offset: -10,
                    onStart() {},
                    onCancel() {},
                    onDone() {},
                });
            },
    		// 滚动事件
            handleScroll() {
                let scrollTop = this.$refs.scrollWrapper.scrollTop;
    
                if (scrollTop < this.$refs.sale.offsetTop) {
                    this.activeTab = 'base';
                } else if (scrollTop >= this.$refs.sale.offsetTop && scrollTop < this.$refs.spec.offsetTop) {
                    this.activeTab = 'sale';
                } else if (scrollTop >= this.$refs.spec.offsetTop && scrollTop < this.$refs.desc.offsetTop) {
                    this.activeTab = 'spec';
                } else if (scrollTop > this.$refs.desc.offsetTop) {
                    this.activeTab = 'desc';
                }
            },
        }
    };
    
    </script>
    <style scoped>
    .wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
        /*margin: 24px;*/
    }
    
    .form-item {
        background-color: #fff;
        margin-top: 10px;
        padding-bottom: 30px;
        height: 800px;
    }
    
    .title {
        font-size: 12px;
        font-weight: 600;
        color: rgba(63, 69, 75, 1);
        line-height: 17px;
        padding: 15px;
        border-bottom: 1px solid #d3dce6;
        margin-bottom: 30px;
    }
    
    .content-wrapper {
        height: 100%;
        overflow: scroll;
    }
    </style>
    <style>
    body, html {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    * {
        padding: 0;
        margin: 0;
    }
    </style>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/98fdb648f40b47c89c7c483109d4066e.png