animation de la page cachée d'Uniapp

Avec la popularisation des smartphones et de l'Internet mobile, la vie et le travail des personnes modernes sont progressivement indissociables des diverses applications. Les applications, en tant que modules de base des smartphones, sont devenues un élément indispensable de notre vie quotidienne. Dans de nombreuses applications, certaines pages cachées sont devenues l'une des fonctions que les utilisateurs aiment particulièrement utiliser, attirant l'attention de nombreux utilisateurs. Alors, comment obtenir l'effet d'animation d'une telle page cachée dans uniapp ? Cet article vous donnera une introduction et une explication détaillées.

Qu'est-ce qu'uniapp

Uniapp est un framework front-end qui peut réaliser un développement multiplateforme. Il peut être développé sur la base de vue.js et peut rapidement empaqueter le code développé dans une application native. L'attrait d'uniapp pour les développeurs réside dans sa compatibilité extrêmement élevée, son développement rapide et sa grande configurabilité. Il s'agit d'un framework très convivial pour les débutants.

Implémentation de l'animation des pages cachées

Pour implémenter des pages cachées dans uniapp, vous devez utiliser le composant barre de navigation. Ce composant peut implémenter des fonctions courantes de la barre de navigation, y compris les sauts de page, etc. Afin d'obtenir cet effet, nous devons introduire une solution de gestion d'état Vuex. Dans uniapp, l'utilisation de Vuex peut contrôler de manière flexible les sauts de page.

Tout d'abord, nous devons surveiller les sauts de page dans le fichier App.vue. Cette partie du code peut faire référence à l'implémentation suivante :

// 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>

Dans le code, nous divisons d'abord App.vue en deux parties, l'une est la navigation. bar, l'un est la partie vue de routage. Ensuite, introduisez la barre de navigation et le magasin, et activez Vuex en appelant la méthode navigationBar.use. De cette façon, dans les implémentations ultérieures, nous pouvons directement utiliser le magasin pour contrôler les sauts de page.

Dans la solution Vuex, nous utilisons l'état pour enregistrer l'état de la page actuelle, les mutations sont utilisées pour changer l'état de l'état et les actions sont utilisées pour soumettre le comportement des mutations. De cette façon, nous pouvons ajouter un composant à chaque page cachée pour une implémentation correspondante. Dans le composant, nous pouvons initialiser l'état du composant via la méthode onLoad, sauter et masquer en fonction de l'état dans le magasin dans la méthode onShow et modifier l'état de la page actuelle via des appels de mutations.

// 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>

Comme le montre le code, nous avons ajouté un composant HiddenPageContainer à HiddenPage.vue, qui sert de partie essentielle du masquage et est utilisé pour obtenir l'effet de masquage. Nous implémentons l'animation cachée après avoir cliqué sur l'événement click de HiddenPage et obtenons un effet de dégradé en définissant les attributs d'opacité et de transition. En même temps, nous modifions l'état du magasin en appelant des mutations pour contrôler le saut et le masquage de la page.

Résumé

Cet article vous présente l'effet d'animation des pages cachées dans uniapp. Nous utilisons Vuex pour gérer l'état des pages et utilisons la barre de navigation pour implémenter le saut de page et d'autres fonctions. Nous espérons que cet article sera utile aux développeurs d'Uniapp. Si vous avez des questions ou des problèmes pendant le processus de mise en œuvre, veuillez laisser un message ci-dessous et nous vous répondrons dans les plus brefs délais.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!