uniapp hidden page animation

With the popularization of smart phones and mobile Internet, modern people’s life and work are gradually inseparable from various APPs. APPs, as one of the basic modules of smart phones, have become an indispensable part of our daily lives. In many apps, some hidden pages have become one of the functions that users particularly like to play, attracting the attention of many users. So, how to achieve the animation effect of such a hidden page in uniapp? This article will give you a detailed introduction and explanation.

What is uniapp

Uniapp is a front-end framework that can achieve cross-platform development. It can be developed based on vue.js and can quickly package the developed code into a native application. . The appeal of uniapp to developers lies in its extremely high compatibility, fast development and high configurability. This is a very friendly framework for beginners.

Implementation of hidden page animation

To implement hidden pages in uniapp, you need to use the navigationbar component. This component can implement common navigation bar functions, including page jumps, etc. In order to achieve this effect, we need to introduce a Vuex state management solution. In uniapp, the use of Vuex can flexibly control page jumps.

First of all, we need to monitor page jumps in the App.vue file. For this part of the code, you can refer to the following implementation:

// App.vue文件
<template>
    <div>
        <navigation-bar></navigation-bar>
        <router-view></router-view>
    </div>
</template>
<script>
    import navigationBar from 'uni-app-navigation-bar';
    import store from './store';  // 引入Vuex

    navigationBar.use(store);  // 通过use方法启用Vuex

    export default {
        components: {
            navigationBar,
        }
    }
</script>

In the code, we first divide App.vue into It has two parts, one is the navigation bar and the other is the routing view part. Then introduce navigation-bar and store, and enable Vuex by calling the navigationBar.use method. In this way, in subsequent implementations, we can directly use the store to control page jumps.

In the Vuex solution, we use state to save the state of the current page, mutations are used to change the state of state, and actions are used to submit the behavior of mutations. In this way, we can add a component to each hidden page for corresponding implementation. In the component, we can initialize the component state through the onLoad method, jump and hide according to the state in the store in the onShow method, and change the state of the current page through mutations calls.

// HiddenPage.vue文件
<template>
    <div>
        <navigation-bar :back="true"></navigation-bar>
        <div class="hidden-page-container" @click="hiddenPage">
            <div class="hidden-page-content">我是隐藏页面，在这里可以放些内容</div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapMutations } from 'vuex';

    export default {
        data() {
            return {
                hidden: false,  // 默认显示状态
            }
        },

        computed: mapState({
            hiddenPageState: state => state.hiddenPage.isShow
        }),

        methods: {
            ...mapMutations({
                setHidden: 'hiddenPage/setHidden',
            }),

            onLoad() {
                // 初始化组件状态
                this.hidden = false;
                this.setHidden(false);
            },

            onShow() {
                // 判断状态，进行页面跳转和隐藏
                if (this.hiddenPageState) {
                    uni.navigateTo({ url: '/pages/hiddenPage/hiddenPage' });
                    this.setHidden(false);
                } else {
                    this.hidden = true;
                }
            },

            hiddenPage() {
                // 点击事件，实现页面的隐藏和跳转
                this.hidden = true;
                this.setHidden(true);
                setTimeout(() => {
                    uni.navigateTo({ url: '/pages/hiddenPage/hiddenPage' });
                    this.setHidden(false);
                }, 300);
            }
        }
    }
</script>
<style>
    /* 样式部分 */
    .hidden-page-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        opacity: 1;
        transition: all 0.3s;
    }
    .hidden-page-container.hidden {
        opacity: 0;
    }
    .hidden-page-content {
        width: 80%;
        height: 80%;
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        font-size: 16px;
        text-align: center;
    }
</style>

As can be seen from the code, we added a hiddenPageContainer component to HiddenPage.vue, which serves as the core part of hiding and is used to achieve the hiding effect. We implement the hidden animation after clicking in the click event of hiddenPage, and achieve a gradient effect by setting the opacity and transition attributes. At the same time, we change the state of the store by calling mutations to control the jumping and hiding of the page.

Summary

This article introduces the animation effect of hiding pages in uniapp. We use Vuex to manage page status, and use navigation-bar to implement page jump and other functions. We hope this article will be helpful to uniapp developers. If you have any questions or problems during the implementation process, please leave a message below and we will reply and answer as soon as possible.

The above is the detailed content of uniapp hidden page animation. For more information, please follow other related articles on the PHP Chinese website!