Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

必要：

Vueプロジェクトの先頭で、テキストを左右にスクロールさせる

ステップ：

1. コンポーネントを自分でカプセル化したり、自分で書いたり、次のコードをコピーしたりすることができます。
2. カプセル化が完了したら、必要なコンポーネントに導入、登録、使用する必要があります。

コード：

マーキー効果を実現するために特別に使用されるマーキーコンポーネントをカプセル化する

<テンプレート>
<!-- マーキー コンポーネント -->
  <div class="marquee-wrap" ref="marquee-wrap">
    <div class="scroll" ref="scroll">
      <p class="marquee">{{text}}</p>
      <p class="コピー" ref="コピー"></p>
    </div>
    <p class="getWidth" ref="getWidth">{{text}}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'マーキー'、
  プロパティ: ['val'],
  データ （） {
    戻る {
      タイマー: null、
      文章： ''
    }
  },
  作成された（）{
    タイマーをsetTimeout(() => {
      this.move()
      タイムアウトをクリア(タイマー)
    }, 1000)
  },
  マウントされた（）{
    for (let 項目の this.val) {
    this.text += アイテム
    }
  },
  メソッド: {
    動く （） {
    maxWidth = this.$refs['marquee-wrap'].clientWidth とします。
    width = this.$refs['getWidth'].scrollWidthとします。
      if (幅 <= 最大幅) 戻り値
    scroll = this.$refs['scroll']とします。
    copy = this.$refs['copy'] とします。
      copy.innerText = this.text
      距離を0とする 
      this.timer = setInterval(() => {
        距離 -= 1
        if (-距離 >= 幅) {
          距離 = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  破棄前() {
    クリア間隔(this.timer)
  }
}
</スクリプト>

<スタイルスコープ>
  .marquee-wrap {
    幅: 100%;
    オーバーフロー: 非表示;
    位置: 相対的;
  }
  .マーキー{
    右マージン: 0.16rem;
  }
  ｐ {
    単語区切り:すべて保持;
    空白: ラップなし;
    フォントサイズ: 0.28rem;
  }
  .スクロール{
    ディスプレイ: フレックス;
  }
  .getWidth{
    単語区切り:すべて保持;
    空白:折り返しなし;
    位置: 絶対;
    不透明度: 0;
    上: 0;
  }
</スタイル>

どのコンポーネントが使用されているか、インポート

// マーキー コンポーネントをインポートします。import marquee from "@/components/marquee/marquee.vue";

引用と登録

エクスポートデフォルト{
  コンポーネント:
  // マーキーコンポーネントを登録します。
  },
 }

登録が完了したら、次のステップはHTMLスタイルです。テンプレートテンプレートでこのコンポーネントを使用します

<マーキークラス="realData">
          <ul class="fa-scroll-cont">
            <li v-for="realData 内のアイテム" :key="item.name">
              <span class="roll-text">{{ item.city }}</span>
            </li>
          </ul>
</マーキー>

次に効果図を示します。

効果をより明確にするために、さらに数枚写真を撮りました。