Vue を使用して TikTok のようなスライド効果を実装する方法-Vue.js-php.cn

Vue を使用して TikTok のようなスライド効果を実装する方法

PHPz

リリース： 2023-09-20 10:09:05

オリジナル

1047 人が閲覧しました

Vue を使用して TikTok のようなスライド効果を実装する方法

Vue を使用して TikTok のようなスライドエフェクトを実装する方法

要約: この記事では、Vue フレームワークを使用して TikTok のようなスライドエフェクトを実装する方法を紹介します。 Vue コンポーネント化を CSS3 アニメーション効果や Vue コマンドと組み合わせて使用することで、Douyin に似たスライド効果を作成できます。この記事では、対応するコード例の書き方を詳しく説明します。

Vue プロジェクトの作成
まず、新しい Vue プロジェクトを作成する必要があります。ターミナルで次のコマンドを実行します。
```
$ vue create douyin-slider
```
ログイン後にコピー
次に、コマンドラインプロンプトに従ってプロジェクトを構成し、デフォルトのオプションを選択します。

Slider コンポーネントの作成
src/components ディレクトリに Slider という名前のフォルダーを作成します。 Slider フォルダーに Slider.vue ファイルを作成し、次のコードを記述します。

<template>
  <div class="slider">
 <div class="slider-content">
   <!-- 此处填充内容 -->
 </div>
  </div>
</template>

<script>
export default {
  name: "Slider",
  data() {
 return {};
  },
};
</script>

<style scoped>
.slider {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
  overflow-x: hidden;
  position: relative;
}

.slider-content {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  transition: transform 0.3s;
}
</style>

ログイン後にコピー

アニメーション効果の書き込み
必要な画像またはビデオを Slider コンポーネントに導入し、テンプレートで v を使用します。 for ディレクティブは一連のコンテンツをレンダリングします。次に、スライディングイベントを slider-content 要素にバインドし、そのtransform 属性を変更してスライディング効果を実現します。

Slider.vue ファイルで、テンプレート部分のコードを次のように変更します。

<template>
  <div class="slider">
    <div class="slider-content" ref="contentRef">
      <div class="item" v-for="(item, index) in items" :key="index">
        <!-- 此处填充item的内容 -->
      </div>
    </div>
  </div>
</template>

ログイン後にコピー

次に、スクリプトに次のコードを追加します。

<script>
export default {
  name: "Slider",
  data() {
    return {
      items: [
        // 此处填充内容数组
      ],
    };
  },
  mounted() {
    const $content = this.$refs.contentRef;

    let startX = null;

    $content.addEventListener("touchstart", (event) => {
      startX = event.touches[0].clientX;
    });

    $content.addEventListener("touchmove", (event) => {
      if (startX) {
        const distance = event.touches[0].clientX - startX;
        $content.style.transform = `translateX(${distance}px)`;
      }
    });

    $content.addEventListener("touchend", () => {
      startX = null;
      $content.style.transform = "translateX(0)";
    });
  },
};
</script>

ログイン後にコピー

アプリコンポーネントの作成
src/components ディレクトリに App という名前のフォルダーを作成し、その中に App.vue ファイルを作成し、次のコードを記述します:

<template>
  <div class="app">
 <Slider />
  </div>
</template>

<script>
import Slider from "./Slider/Slider.vue";

export default {
  name: "App",
  components: {
 Slider,
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

ログイン後にコピー

# #main.js ファイルを変更します。
src ディレクトリで main.js ファイルを見つけて、次のコードを追加します。
```
import Vue from "vue";
import App from "./components/App/App.vue";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");
```
ログイン後にコピー
プロジェクトを実行します。
次のコマンドを実行します。
```
$ npm run serve
```
ログイン後にコピー
次にブラウザで http://localhost:8080 を開くと、Douyin のスライド効果を模倣したページが表示されます。

概要:

Vue フレームワークを CSS3 アニメーション効果と命令と組み合わせて使用することで、TikTok のようなスライド効果を簡単に実装できます。 Slider コンポーネントでは、v-for 命令を使用して一連のコンテンツをレンダリングし、スライドイベントをバインドしてスライド効果を実現します。この記事が、Vue を使用してスライド効果を実装する方法を理解するのに役立つことを願っています。

以上がVue を使用して TikTok のようなスライド効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。