How to implement page jump animation effect in uniapp

How to realize the page jump animation effect in uniapp

In uniapp, the page jump animation effect can be achieved by using the built-in navigateTo and redirectTo method, combined with CSS animation. This article will introduce in detail how to implement page jump animation effect in uniapp, and attach specific code examples.

There are two ways to jump pages in uniapp: navigateTo and redirectTo. The difference between them is that the former opens a new page on the current page, and the latter closes the current page and opens a new page.

First, let’s look at the use of the navigateTo method. The following is a sample code for jumping from the home page to the details page:

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

In a click event on the home page, specify the address of the target page to jump to through the uni.navigateTo method'/pages/detail/detail', and you can set the type and duration of the jump animation through the two parameters animationType and animationDuration.

In the onLoad method of the details page, we can obtain the parameters passed by the homepage through the uni.getOpenerEventChannel method, as shown below:

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

Next, let’s look at the use of the redirectTo method. The following is a sample code for a homepage to jump to the login page:

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

In the onLoad method of the login page, if we need to get the parameters passed by the previous page, we can use uni .getOpenerEventChannel method, the sample code is as follows:

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

In addition to achieving animation effects through uniapp’s built-in page jump method, we can also combine CSS animations to achieve more diverse effects. For example, you can use the animation component in uniapp to set custom animation effects.

The following is a sample code that uses the animation component to implement custom animation effects:

<!-- 主页 -->
<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>

In the above example, we introduce the animation component Go to the details page and achieve some animation effects by calling methods on its components.

Through the above introduction and code examples, I believe that readers have understood how to implement page jump animation effects in uniapp, and can adjust and expand according to actual needs. Hope this article can be helpful to readers.

The above is the detailed content of How to implement page jump animation effect in uniapp. For more information, please follow other related articles on the PHP Chinese website!