vue里的锚点定位

最新推荐文章于 2025-08-11 11:08:50 发布

原创最新推荐文章于 2025-08-11 11:08:50 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一个使用Vue.js实现的时间轴组件案例，通过点击不同的时间点，页面会滚动到对应的内容区域。此示例展示了如何结合Vue.js的声明式渲染和DOM操作来提升用户体验。

例子代码

<template>
  <div class="hello">
    <div class="all" >
      <div class="left">
        <el-timeline>
          <el-timeline-item v-for="(fatherItem, index) in allData" :key="index">
            <a @click="jump(index)">
              {{ fatherItem.moduleName }}
            </a>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="right" ref="helloData">
        <div v-for="(fatherItem, index) in allData" :key="'a' + index">
          <div class="firsttitle">{{ fatherItem.moduleName }}</div>
          <div class="zhan-wei"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      allData: [
        {
          moduleName: "家庭成员0",
        },
        {
          moduleName: "家庭成员1",
        },
        {
          moduleName: "家庭成员2",
        },
        {
          moduleName: "家庭成员3",
        },
        {
          moduleName: "家庭成员4",
        },
        {
          moduleName: "家庭成员5",
        },
        {
          moduleName: "家庭成员6",
        },
        {
          moduleName: "家庭成员7",
        },
        {
          moduleName: "家庭成员8",
        },
        {
          moduleName: "家庭成员9",
        },
        {
          moduleName: "家庭成员10",
        },
      ],
    };
  },
  methods: {
    jump(index) {
      let jump = document.querySelectorAll(".firsttitle");
      let topUp = jump[index].offsetTop;
      window.scrollTo(0, topUp);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.all {
  display: flex;
}
.left {
  width: 300px;
  position:fixed;
}
.right {
  flex: 1;
  padding-left: 300px;
}
.zhan-wei {
  height: 300px;
  background-color: pink;
  border: 2px solid #ddd;
}
</style>