vue はリストの上下スクロールを実装します

フロントエンド開発者として、リストを上下にスクロールする必要があることがよくありますが、ネイティブ スクロール バーを使用すると、ユーザー エクスペリエンスが理想的でないことがよくあります。したがって、この記事では、Vue.js を使用してリストの上下スクロール効果を実現し、ユーザー エクスペリエンスを向上させる方法を紹介します。

実装アイデア

上下の循環スクロールを実装するための中心的なアイデアは、リストの先頭と末尾の間に一定量の繰り返しデータを追加することです。これにより、ユーザーがリストにスクロールしたときに、リストの一番上または一番下で、実際に反対側の重複データからスクロールを開始させます。このようにして、上下の円形スクロールの効果を実現できます。

ただし、元のデータソースに直接重複データを追加すると、元のデータが正常に表示されません。したがって、元のデータの整合性を維持するために、計算されたプロパティを利用してこれを実現する必要があります。

実装プロセス

Vue.js で上下の循環スクロールを実装するプロセスは、次のステップに分けることができます。

1. 外部コンテナをlist

スクロール効果を実現するには、まずコンテナ要素を追加し、その中にリストを配置する必要があります。同時に、ユーザーがリストをスクロールできるように、コンテナーの高さとオーバーフローのプロパティを設定する必要もあります。

<div class="list-container"
     style="height: 400px;
            overflow: auto;">
  <ul class="list">
    <li v-for="(item, index) in displayList"
        :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

2. データ ソースと計算されたプロパティを定義します

次に、データ ソースと計算されたプロパティを定義する必要があります。ここでは配列list##を使用します。 # データ ソースとして、displayList を計算された属性として使用します。計算された属性では、cloneList メソッドを使用してデータ ソースのクローンを作成し、クローンされたデータ ソースをエンドツーエンドで接続し、重複データを追加します。

data() {
  return {
    list: [
      { id: 1, text: 'item 1' },
      { id: 2, text: 'item 2' },
      ...
      { id: 20, text: 'item 20' }
    ]
  }
},
computed: {
  displayList() {
    const cloneList = [...this.list, ...this.list, ...this.list];
    const top = this.scrollTop % this.itemHeight;
    const startIndex = Math.floor(this.scrollTop / this.itemHeight) % this.list.length;
    const endIndex = startIndex + Math.ceil(this.listHeight / this.itemHeight);

    return cloneList.slice(startIndex, endIndex + 1);
  }
},

バインド スクロール イベント

ユーザーのスクロール アクションに応じてリストの表示コンテンツを更新するには、

scroll# をリッスンする必要があります。リスト コンテナーの ## イベントで、スクロール距離を計算して displayList の計算されたプロパティを更新します。 <pre class='brush:php;toolbar:false;'>mounted() { const listContainer = document.querySelector('.list-container'); listContainer.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const listContainer = document.querySelector('.list-container'); this.scrollTop = listContainer.scrollTop; } },</pre>

スクロール関連のプロパティを計算する

4. 計算されたプロパティでは、スクロール バーの位置、リスト項目の高さ、およびその他のプロパティを計算する必要があります。

displayListに表示します。

は更新時に再計算されます。この例では、this.scrollTop を使用してコンテナの現在のスクロール距離を保存し、this.itemHeight を使用して各リスト項目の高さを保存し、this を使用します。 .listHeight リスト全体の高さを保存します。 <pre class='brush:php;toolbar:false;'>data() { return { ... scrollTop: 0, itemHeight: 30, listHeight: this.list.length * this.itemHeight } }, computed: { ... displayList() { ... this.listHeight = this.list.length * this.itemHeight; return cloneList.slice(startIndex, endIndex + 1); } },</pre>概要

上記の手順により、Vue.js に基づいてリストの上下スクロールを実現できます。ユーザーがリストの一番上または一番下にスクロールすると、実際にはもう一方の端で繰り返されるデータからスクロールが開始されるため、上下にスクロールする効果が得られます。さらに、計算されたプロパティを使用して元のデータの整合性を維持し、スクロール イベントをバインドしてスクロール関連のプロパティを計算することで、自然でスムーズなスクロール効果を実現しました。

以上がvue はリストの上下スクロールを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。