uniapp implémente pull-up et release pour changer de page

1. Introduction

Avec la popularité des appareils mobiles, la demande des gens pour les applications mobiles est de plus en plus élevée. Une bonne application mobile doit être capable de répondre aux besoins des utilisateurs et d’offrir une bonne expérience utilisateur. Parmi eux, le changement de page est la méthode d’interaction la plus courante et la plus importante dans les applications mobiles. Dans cet article, nous présenterons comment utiliser uniapp pour obtenir l'effet d'ouvrir et de relâcher pour changer de page afin d'améliorer l'expérience utilisateur pendant l'utilisation.

2. Réaliser l'effet

L'effet que nous voulons obtenir est le suivant : lorsque l'utilisateur relève et relâche l'écran de la page actuelle, la page peut passer à la page précédente.

3. Connaissances préalables

Avant de lire cet article, vous devez connaître quelques connaissances de base sur uniapp. Si vous n'avez jamais utilisé Uniapp pour développer de petits programmes ou des pages H5 auparavant, il est recommandé d'acquérir d'abord les connaissances de base d'Uniapp, et je n'entrerai pas dans les détails ici.

4. Étapes de mise en œuvre

1. Créez le projet uniapp

Nous créons d'abord un projet uniapp et le nommons "pull-page". Après la création, créez deux pages dans le dossier pages et nommez-les respectivement « page1 » et « page2 ».

2. Ajouter du contenu de page

Dans les pages "page1" et "page2", nous pouvons ajouter n'importe quel contenu pour démontrer l'effet de l'extraction et du relâchement pour changer de page.

3. Ajouter des événements à la page

Nous devons ajouter un événement « pull-down pour actualiser » à la page et gérer l'effet du déclenchement de la version pull-up pour changer de page dans l'événement.

Voici le code pour ajouter un événement d'actualisation déroulant à la page "page1" :

<template>
  <view>
    <view class="content">
      <text>这是Page1页面</text>
    </view>
  </view>
</template>

<script>
  export default {
    onPullDownRefresh() {
      uni.navigateTo({
        url: "/pages/page2/page2",
      });
    },
  };
</script>

<style>
  .content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Dans le code ci-dessus, nous utilisons la méthode uni.navigateT

o dans la fonction "onPullDownRefresh" pour réaliser un saut de page . Ici, nous passons à la page "page2". Dans la page "page2", vous devez également ajouter un événement de rafraîchissement déroulant pour revenir à la page "page1". Le code est le suivant :

<template>
  <view>
    <view class="content">
      <text>这是Page2页面</text>
    </view>
  </view>
</template>

<script>
  export default {
    onPullDownRefresh() {
      uni.navigateBack({
        delta: 1,
      });
    },
  };
</script>

<style>
  .content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Dans la fonction "onPullDownRefresh", nous utilisons la méthode uni.navigateBack. pour retourner la page.

4. Définir le style de la page

Enfin, nous devons définir le style de la page pour que la page soit affichée au centre.

<style>
  .content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

De cette façon, un simple effet d'extraction et de libération de changement de page est complété. Grâce aux étapes ci-dessus, nous pouvons facilement obtenir cet effet interactif dans uniapp et améliorer l'expérience utilisateur.

5. Résumé

Dans cet article, nous montrons à travers le code comment utiliser uniapp pour obtenir l'effet de tirer et de relâcher pour changer de page. Cet effet interactif peut être facilement obtenu en quelques étapes seulement. Bien entendu, les fonctions d'uniapp sont bien plus que cela. Si vous souhaitez en savoir plus, veuillez vous référer à la documentation officielle d'uniapp.

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!