uniappでページジャンプアニメーション効果を実装する方法

uniapp でページ ジャンプ アニメーション効果を実現する方法

uniapp では、組み込みの navigateTo# を使用してページ ジャンプ アニメーション効果を実現できます。 ## メソッドと redirectTo メソッドを CSS アニメーションと組み合わせます。この記事では、uniappでページジャンプアニメーション効果を実装する方法を詳しく紹介し、具体的なコード例を添付します。

uniapp でページをジャンプするには、

navigateTo と redirectTo の 2 つの方法があります。両者の違いは、前者は現在のページ上に新しいページを開き、後者は現在のページを閉じて新しいページを開くことです。

まず、

navigateTo メソッドの使用方法を見てみましょう。以下は、ホームページから詳細ページにジャンプするサンプル コードです。

// 主页
viewDetail() {
  uni.navigateTo({
    url: '/pages/detail/detail',
    animationType: 'slide-in-bottom', // 设置动画类型为从底部滑入
    animationDuration: 300 // 设置动画时长为300ms
  });
}

ホームページのクリック イベントで、ジャンプ先のページのアドレスを

uni で指定します。 navigateTomethod'/pages/detail/detail' を実行すると、2 つのパラメータ animationType と animationDuration## を使用してジャンプ アニメーションのタイプと継続時間を設定できます。 ＃。 詳細ページの

onLoad

メソッドでは、次に示すように、uni.getOpenerEventChannel メソッドを通じてホームページから渡されたパラメータを取得できます。

// 详情页
onLoad() {
  const eventChannel = uni.getOpenerEventChannel();
  eventChannel.on('detail', (data) => {
    console.log(data); // 输出传递的参数
  });
}

次に、redirectTo

メソッドの使用法を見てみましょう。以下は、ログイン ページにジャンプするホームページのサンプル コードです。

// 主页
redirectToLogin() {
  uni.redirectTo({
    url: '/pages/login/login',
    animationType: 'pop-in', // 设置动画类型为弹出
    animationDuration: 300 // 设置动画时长为300ms
  });
}

ログイン ページの onLoad

メソッドで、前のページによって渡されたパラメータを取得する必要がある場合

uni .getOpenerEventChannel メソッドを使用できます。サンプル コードは次のとおりです。

// 登录页
onLoad() {
  const eventChannel = uni.getOpenerEventChannel();
  eventChannel.on('login', (data) => {
    console.log(data); // 输出传递的参数
  });
}

uniapp の組み込みページ ジャンプ メソッドを使用してアニメーション効果を実現することに加えて、CSS アニメーションを組み合わせることもできます。より多様な効果を実現します。たとえば、uniapp の animation

コンポーネントを使用して、カスタム アニメーション効果を設定できます。

以下は、animation

コンポーネントを使用してカスタム アニメーション効果を実装するサンプル コードです。

<!-- 主页 -->
<template>
  <view class="container">
    <button @click="viewDetail">跳转到详情页</button>
  </view>
</template>

<script>
  export default {
    methods: {
      viewDetail() {
        uni.navigateTo({
          url: '/pages/detail/detail'
        });
      }
    }
  };
</script>

<style>
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
</style>

<!-- 详情页 -->
<template>
  <view class="container">
    <button @click="goBack">返回</button>
  </view>
</template>

<script>
  import animation from '@/components/animation/animation.vue';

  export default {
    components: {
      animation
    },
    methods: {
      goBack() {
        uni.navigateBack();
      }
    }
  };
</script>

<style>
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
</style>

上の例では、animation## を導入しています。 #Component 詳細ページに移動し、そのコンポーネントのメソッドを呼び出してアニメーション効果を実現します。

上記の紹介とコード例を通じて、読者は uniapp でページ ジャンプ アニメーション効果を実装する方法を理解し、実際のニーズに応じて調整および拡張できると思います。この記事が読者にとって役立つことを願っています。

以上がuniappでページジャンプアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。