根据滚动位置使用列表条目名称更新Vuetify工具栏标题

Question

我的联络人清单很长。 如果滚动列表，则工具栏标题应显示在工具栏标题下方的人员名称。

CodePen示例： https ：//codepen.io/tomtomsx/pen/pozKaBv ？ editors = 1010

我正在将VueJS与Vuetify框架一起使用。 Vuetify提供了以下组件，但基于位置-如何获取列表条目的名称？

1. 滚动： https ： //vuetifyjs.com/en/styles/scroll
2. 滚动： https ： //vuetifyjs.com/en/directives/scrolling

HTML：

<div id="app">
  <v-app id="inspire">
    <v-card
      max-width="500"
      class="mx-auto"
    >
      <v-toolbar
        color="pink"
        dark
        fixed
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>NAME: </v-toolbar-title>

        <div class="flex-grow-1"></div>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-checkbox-marked-circle</v-icon>
        </v-btn>
      </v-toolbar>

      <v-list two-line>
        <v-list-item-group
          v-model="selected"
          multiple
          active-class="pink--text"
        >
          <template v-for="(item, index) in items">
            <v-list-item :key="item.title">
              <template v-slot:default="{ active, toggle }">
                <v-list-item-content>
                  <v-list-item-title v-text="item.title"></v-list-item-title>
                  <v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
                  <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-action>
                  <v-list-item-action-text v-text="item.action"></v-list-item-action-text>
                  <v-icon
                    v-if="!active"
                    color="grey lighten-1"
                  >
                    star_border
                  </v-icon>

                  <v-icon
                    v-else
                    color="yellow"
                  >
                    star
                  </v-icon>
                </v-list-item-action>
              </template>
            </v-list-item>

            <v-divider
              v-if="index + 1 < items.length"
              :key="index"
            ></v-divider>
          </template>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selected: [2],
    items: [
      {
        action: '15 min',
        headline: 'Brunch this weekend?',
        title: 'Ali Connors',
        subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
      },
      {
        action: '2 hr',
        headline: 'Summer BBQ',
        title: 'me, Scrott, Jennifer',
        subtitle: "Wish I could come, but I'm out of town this weekend.",
      },
      [...]

Answer 1

我相信您正在寻找IntersectionObserver API 。 您需要将一些数据绑定到工具栏标题，然后使用违反观察者的文本来更新该数据。

这是一支可以满足您需求的新笔： https : //codepen.io/hallucinarium/pen/661bff04a6b9e696d8cde480e08172e5

这将绑定数据：

<v-toolbar-title>NAME: {{ activeTitle }} </v-toolbar-title>

这标记了将被设置为IntersectionObserver根的元素：

<v-list id="observer" two-line>

此CSS使您的标题保持固定在条目上方，并将列表限制为视口的高度（对于IntersectionObserver很重要）：

#observer {
  height: 100vh;
  overflow-y: scroll;
}

这总结了我对您的JavaScript所做的更改（恐怕这是非常糟糕的JavaScript，但足以满足本示例的要求）：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selected: [2],
    items: […],
    intersectionObserver: Object.create(null),
    activeTitle: "",
  }),
  methods: {
    onIntersection: function (entries, observer) { // Create a callback.
      entries.forEach(entry => { // Cycles through every intersected item.
        if(entry.isIntersecting) { // Ensure the item is in fact intersecting.
          this.activeTitle = entry.target.textContent; // Update the bound data.
        }
      });
    },
  },
  mounted: () => {    
    const observerEl = document.getElementById("observer"); // Find the element to use as an observer.

    const options = { // Set observer options.
      root: observerEl,
      rootMargin: "0px 0px -90% 0px", // Shrink observer so it watches only the top.
      // threshold: 0, // Changes the amount of intersection required to fire.
    };


    this.intersectionObserver = new window.IntersectionObserver(this.onIntersection, options); // Create the observer.

    const titles = document.getElementsByClassName("v-list-item__title");
    for(let i = 0; i < titles.length; i++) { // Observe the list-item titles.
      this.intersectionObserver.observe(titles[i]);
    }
  },
});

希望对您有所帮助。

Answer 2

好吧，您的问题是：您为各种项目分配了相同的值，而不仅仅是一个。 只需使用索引值，然后将其用于Vuetify。 解决方法您可以使用v-bind：value =“ variablename”（或简单地：value =“ variablename”）将输入的值绑定到变量，然后对包含这些标题的位置进行搜索查询，创建一个新的数组来存储此新列表并像您一样呈现它。 您可以在一个函数中执行此操作：

let newArray = [];
    items.map((item, index) => {
if(variablename === item.title){
newArray = [...item]
}
}
});

您也可以使用与上述相同的过程存储项目的位置，只需将“索引”添加到数组中即可。