vue 锚点定位

vue 锚点定位

<template>
    <div class="details">
        <div class="wrapper w">
            <div class="benefit">
                <div class="benfit-left">
//这个是页签
                    <div class="benefit-cell" ref="searchBar" :class="{'fixed': searchBarFixed}">
                        <div class="benefit-cell-title tabs">
                            <div class="wrapper-tab">
                                <span class="tab" :class="{'active1':index==current}" v-for="(item,index) in nav" v-on:click="tabSelect(index)">{{item.text}}</span>
                                <div v-if="searchBarFixed" class="insure-btn" @click="goInsured(detailsData.code)">立即投保</div>
                            </div>
                        </div>
                    </div>
//第一部分
                    <div class="benefit-cell" ref="introduce">
                        <div class="benefit-cell-content">
                            <!--todo：产品介绍-->
                            <div class="wrapper" v-html="detailsData.content"></div>
                        </div>
                    </div>
//第二部分
                    <div class="benefit-cell" ref="problem">
                        <div class="benefit-cell-title">
                            <h4>常见问题</h4>
                            <a class="benefit-cell-detail" v-if="subLink.notice_more" @click="goDetails(subLink.notice_more.key,subLink.notice_more.title,detailsData.id)">{{subLink.notice_more.title}}</a>
                        </div>
                        <div class="benefit-cell-content">
                            <!--todo：常见问题-->
                            <div class="wrapper" v-html="detailsData.notice"></div>
                        </div>
                    </div>
//第三部分
                    <div class="benefit-cell" ref="claims">
                        <div class="benefit-cell-title">
                            <h4>理赔说明</h4>
                            <a class="benefit-cell-detail" v-if="subLink.claim_notice" @click="goDetails(subLink.claim_notice.key,subLink.claim_notice.title,detailsData.id)">{{subLink.claim_notice.title}}</a>
                        </div>
                        <div class="benefit-cell-content">
                            <!--todo：理赔内容-->
                            <el-steps :active="contentClaims.length" align-center style="margin:60px 0">
                                <el-step :title="item.title" :description="item.info" v-for="(item,index) in contentClaims" :key="index"></el-step>
                            </el-steps>
                        </div>
                        <div class="benefit-cell-content" style="min-height:600px">
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import urls from "@/api/urls";
    let offsetTop, problemTop, claimsTop;
    export default {
        components: {
            "bg-header": header
        },
        data() {
            return {
                detailsData: {},
                productType: '',
                defaultAvatar,
                current: 0,
                subLink: '',
                insureNotes: {},
                searchBarFixed: false,
                nav: [{
                    text: '产品介绍',
                    target: '#introduce'
                }, {
                    text: '常见问题',
                    target: '#problem'
                }, {
                    text: '理赔说明',
                    target: '#claims'
                }],
                code:'',
                contentClaims:[]
            }
        },
        created() {
            this.id = this.$route.query.id
            this.getInfo()
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);//页面加载的时候调滚动的方法
        },
        methods: {
            handleScroll() { //滚动的方法
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   //这里的判断是为了兼容各个浏览器
                offsetTop = this.$refs.searchBar.offsetTop;
                problemTop = this.$refs.problem.offsetTop;
                claimsTop =  this.$refs.claims.offsetTop;
                if(scrollTop > offsetTop) {
                    this.searchBarFixed = true;
                } else {
                    this.searchBarFixed = false;
                }
                if(scrollTop >= problemTop && scrollTop < claimsTop) {
                    this.current = 1;
                } else if(scrollTop >= claimsTop) {
                    this.current = 2;
                } else {
                    this.current = 0;
                }
                console.log(offsetTop)
            },
            tabSelect(index) {   //tab切换的方法
                this.current = index;
                // 锚点实时切换
                let stepTop =
                    this.$refs.introduce.offsetTop

                let buyTop =
                    this.$refs.problem.offsetTop

                let evaluateTop =
                    this.$refs.claims.offsetTop
                    console.log(stepTop)
                switch(index) {
                    case 0:
                        if(!document.documentElement.scrollTop){    //这里的判断是为了兼容各个浏览器
                            document.body.scrollTop = stepTop
                        }else{
                            document.documentElement.scrollTop = stepTop
                        }
                        break
                    case 1:
                        if(!document.documentElement.scrollTop){
                            document.body.scrollTop = buyTop
                        }else{
                            document.documentElement.scrollTop = buyTop
                        }
                        break
                    case 2:
                        if(!document.documentElement.scrollTop){
                            document.body.scrollTop = evaluateTop
                        }else{
                            document.documentElement.scrollTop = evaluateTop
                        }
                        break
                    default:
                        break
                }
            },
        }
    };
</script>

<style scoped lang="less">
    @import "../../assets/css/mixins";
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            background: #fff;
            box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
            .tabs {
                width: 1200px;
                margin:0 auto;
            }
        }
</style>

转载于:https://www.cnblogs.com/lml-lml/p/10130921.html