根據滾動位置使用列表條目名稱更新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]
}
}
});

您也可以使用與上述相同的過程存儲項目的位置，只需將“索引”添加到數組中即可。