点击跳转到指定区域

桥豆麻袋9393

于 2022-09-12 23:10:05 发布

阅读量852

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46361785/article/details/126824191

版权

效果如下，在任意界面点击about，about的内容都将出现在可视区。在这里插入图片描述
主要原理：scrollIntoView()
首页点击about时，调用scrollIntoView将about元素滚动到可视区。
其他页面点击about时，为路由设置参数并跳转到首页，首页监听路由参数调用方法，将about元素滚动到可视区。
代码如下
主页

<template>
  <div class="home">
    <div class="nav wrap">
      <ul>
        <li @click="$router.push('/page1')">page1</li>
        <li @click="gotoabout">about</li>
        <li @click="$router.push('/page2')">page2</li>
        <li @click="$router.push('/page3')">page3</li>
      </ul>
    </div>
    <div class="header wrap">头部</div>
    <div class="content">
      <div class="cont1 wrap">内容1</div>
      <div class="cont2 wrap">内容2</div>
      <div class="cont3" id="about" >
        <ul>
          <li class="imgitem" v-for="(item, index) in imglist" :key="index">
            <img :src="item.url" />
          </li>
        </ul>
      </div>
    </div>
    <div class="footer wrap">底部</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imglist: [
        { url: require("./img/1.png") },
        { url: require("./img/2.png") },
        { url: require("./img/3.png") },
        { url: require("./img/4.png") },
        { url: require("./img/5.png") },
        { url: require("./img/6.png") },
        { url: require("./img/7.png") },
      ],
    };
  },
  watch: {
    $route: {
      handler() {
      //监听其他页面调用方法
        if (this.$route.query["about"]) {
          this.gotoabout();
        }
      },
    },
  },
  mounted() {
    if (this.$route.query["about"]) {
      this.gotoabout();
    }
  },
  methods: {
    gotoabout() {
    //scrollIntoView将元素滚动到可视区
      document.getElementById("about").scrollIntoView();
      this.$router.push("/");
    },
    mousescorll() {
      let showimg = this.$refs.showimg;
      console.log(showimg.scrollLeft);
      if (showimg.scrollLeft >= 2800) {
        showimg.scrollLeft = 1
      }
      if(showimg.scrollLeft <= 0) {
        showimg.scrollLeft = 2801
      }
    },
  },
};
</script>

其他页面

<template>
  <div class="about wrap">
    <div class="nav">
      <ul>
        <li @click="$router.push('/page1')">page1</li>
        <li @click="gotoabout">about</li>
        <li @click="$router.push('/page2')">page2</li>
        <li @click="$router.push('/page3')">page3</li>
      </ul>
    </div>
    <h1>This is page3</h1>
  </div>
</template>
<script>
export default {
  methods: {
    gotoabout() {
      this.$router.push({
        path:'/',
        query:{
          about:1
        }
      })

    },
  },
};
</script>