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!

This article details uni-app's local storage APIs (uni.setStorageSync(), uni.getStorageSync(), and their async counterparts), emphasizing best practices like using descriptive keys, limiting data size, and handling JSON parsing. It stresses that lo

This article details workarounds for renaming downloaded files in UniApp, lacking direct API support. Android/iOS require native plugins for post-download renaming, while H5 solutions are limited to suggesting filenames. The process involves tempor

This article addresses file encoding issues in UniApp downloads. It emphasizes the importance of server-side Content-Type headers and using JavaScript's TextDecoder for client-side decoding based on these headers. Solutions for common encoding prob

This article details uni-app's geolocation APIs, focusing on uni.getLocation(). It addresses common pitfalls like incorrect coordinate systems (gcj02 vs. wgs84) and permission issues. Improving location accuracy via averaging readings and handling

This article compares Vuex and Pinia for state management in uni-app. It details their features, implementation, and best practices, highlighting Pinia's simplicity versus Vuex's structure. The choice depends on project complexity, with Pinia suita

This article details making and securing API requests within uni-app using uni.request or Axios. It covers handling JSON responses, best security practices (HTTPS, authentication, input validation), troubleshooting failures (network issues, CORS, s

The article details how to integrate social sharing into uni-app projects using uni.share API, covering setup, configuration, and testing across platforms like WeChat and Weibo.

This article explains uni-app's easycom feature, automating component registration. It details configuration, including autoscan and custom component mapping, highlighting benefits like reduced boilerplate, improved speed, and enhanced readability.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
