vue 实现锚点和滚动高亮效果

最新推荐文章于 2024-06-14 14:28:48 发布

前端小蔡姬

最新推荐文章于 2024-06-14 14:28:48 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端 javascript css

本文链接：https://blog.csdn.net/x_nweBorder01k/article/details/126427400

本文介绍了一个使用Element UI实现的时间线组件，通过点击事件控制右侧屏幕滚动并高亮显示相应模块。同时，当左侧时间线选择项变化时，右侧会自动定位到对应的屏幕部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<el-row :gutter="10" class="umar-t10">
                <el-col :span="4">
                    <div class="uinn-a30 bg-white" style="height: calc(100vh - 94px)">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :color="activity.color"
                                size="large"
                                :class="index == activeIndex ? 'check_color' : ''"
                                class="c-p"
                                @click.native="timeLineClick(index)">
                                <span :class="index == activeIndex ? 'active_color' : ''">{{activity.content}}</span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div ref="box" @scroll="handleScroll($event)" class="bg-white uinn-a10" style="border: 1px solid #e4e7ed;height: calc(100vh - 94px);overflow-y:auto"> 
                        <div class="screen" id="natural">
                           <natural-quality></natural-quality>  
                        </div>
                        <div class="screen" id="level">
                            <value-level></value-level>
                        </div>
                        <div class="screen" id="product">
                            <product-specific></product-specific>
                        </div>
                        <div class="screen" id="deed">
                            <deed-swarm></deed-swarm>
                        </div>
                        <div class="screen" id="speciality">
                            <cus-speciality></cus-speciality>
                        </div>
                    </div>
                </el-col>
            </el-row>

 data(){
        return {
            activeIndex: 0,
            activities: [
                {content: '自然属性',id: 'natural'},
                {content: '价值等级',id: 'level'},
                {content: '产品特有',id: 'product'},
                {content: '行为分群',id: 'deed'},
                {content: '客群特质',id: 'speciality'},
            ],
            scrollHeight: []
        }
    },

1、锚点，点击左侧时间线，右侧页面立马跳到对应位置

点击左侧时间线事件：

timeLineClick(index){
   this.activeIndex = index   //全局变量activeIndex，设置高亮效果，字体颜色等
   let jump = document.querySelectorAll('.screen');   //右侧每一模块的类名
   let offsetTop = jump[index].offsetTop;
   this.$refs.box.scrollTop = offsetTop;  //跳到对应位置
},

2、右侧页面滚动，左侧时间线跟着高亮

1>获取每个模块的高度

mounted(){
        this.$nextTick(() => {
            this.getScrollHeight()
        })    
    },

2>方法设置右侧每个模块的id和左侧时间线的每个content id想同，遍历时间线数组获取高度

getScrollHeight() {
            this.scrollHeight = []
            this.activities.map(item => {
                this.scrollHeight.push(document.getElementById(item.id).offsetTop - 20)
            })
        },

添加 @scroll="handleScroll($event)"方法 ref加上

handleScroll(e){
            if(e.target.scrollTop > this.scrollHeight[this.scrollHeight.length-1]-100){
                this.activeIndex = this.scrollHeight.length -1
            }else{
                this.scrollHeight.map((item,index)=>{
                    if(e.target.scrollTop >= item){
                        this.activeIndex = index;
                    }
                })
            }
        },

css

<style lang="less" scoped>
.check_color{
    /deep/.el-timeline-item__node{
      background: #3fa3ff !important;
    }
}
.active_color{
    color: #3fa3ff;
}
</style>