时间戳

首页 > 解决方案 > 当该部分出现在屏幕上时如何使工具栏标题处于活动状态

javascript - 当该部分出现在屏幕上时如何使工具栏标题处于活动状态

问题描述

我正在尝试为页面添加 v-toolbar。我在此页面上有多个部分。当相应的部分出现在屏幕上时，我希望工具栏标题处于活动状态。我无法弄清楚如何实现这一目标。我正在使用 vuetify 1.0.5 版。请帮我解决我的问题。

<template> 
  <div>
    <v-toolbar dense fixed class="main-toolbar" scroll-off-screen>
      <v-layout row wrap>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
        </v-flex>
      </v-layout>
    </v-toolbar>
    <div id="section1">
     <Section1></Section1>
    </div>
    <div id="section1">
     <Section2></Section2>
    </div>
    <div id="section1">
     <Section3></Section3>
    </div>
  </div>    
</template>

<script>
import Section1 from 'views/section1.vue';
import Section2 from 'views/section2.vue';
import Section3 from 'views/section3.vue';

export default {
  components: {
    Section1,
    Section2,
    Section3,
  }
};
</script>

标签： javascriptvue.jsvuetify.js

解决方案

我不确定这是否是您需要的，但您可以收听“滚动”，并且根据部分位置，您可以将部分标记为活动。

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-app-bar color="primary" xdense fixed class="main-toolbar" scroll-off-screen>
        <v-layout row wrap>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(1)"><a href="javascript:document.getElementById('view1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
          </v-flex>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(2)"><a href="javascript:document.getElementById('view2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
          </v-flex>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(3)"><a href="javascript:document.getElementById('view3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
          </v-flex>
        </v-layout>
      </v-app-bar>
      <div style="margin-top:80px;">
          <div class="view" id="view1"> View 1</div>
          <div class="view" id="view2"> View 2</div>
          <div class="view" id="view3"> View 3</div>
      </div>
    </v-app>
  </div>

  <style>
    .main-toolbar a {
      text-decoration: none;
      color:white;
    }
    .active a{color: yellow;}
    .view {
      border:2px solid navy;
      margin:5px;
      height:600px;
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),

      data() {
        return {
          activeView: 1,
          scrollY: 0,
          viewOffsets: []
        }
      },
      methods: {
         show(id) {
            document.getElementById(id).scrollIntoView();
         },
         onScroll(e) {
           this.scrollY = window.scrollY;
           this.scrollY2 = this.scrollY + window.innerHeight;

           let totalHeight = document.body.clientHeight;
           let id = 1;
           const viewOffset = this.viewOffsets[0];
           for(let i = 0; i < this.viewOffsets.length-1; i++) {
              if (this.scrollY >=  (this.viewOffsets[i] - viewOffset)) {
                id = i + 1;
              }
           }
           if (this.scrollY2 > (totalHeight - viewOffset)) {
             id = this.viewOffsets.length;
           }

           this.activeView = id;
         },
         titleClass(id) {
          return (this.activeView == id) ? 'active' : '';
        }
      },
      computed: {
      },
      mounted() {
        document.addEventListener("scroll", this.onScroll);
        const y1 = document.getElementById('view1').offsetTop
        const y2 = document.getElementById('view2').offsetTop
        const y3 = document.getElementById('view3').offsetTop
        this.viewOffsets = [y1, y2, y3];
      }
    })
  </script>
</body>

</html>

推荐阅读