Comment implémenter un saut de bouton personnalisé dans Uniapp

Avec le développement de l'Internet mobile, le développement d'applications mobiles est progressivement devenu un sujet brûlant. En tant que framework de développement multiplateforme, Uniapp est très populaire dans le développement d'applications mobiles. Aujourd'hui, nous présenterons la fonction de saut de bouton personnalisé dans le développement Uniapp.

La fonction de routage intégrée d'Uniapp peut passer d'une page à l'autre, mais si vous devez ajouter plusieurs boutons personnalisés à la page pour accéder à différentes pages, comment l'implémenter ? Ci-dessous, nous utiliserons un exemple pour présenter comment implémenter des sauts de boutons personnalisés dans Uniapp.

Tout d'abord, après avoir créé le projet Uniapp, nous devons créer deux pages dans le dossier pages, à savoir index et page1. Parmi eux, index est la page par défaut et page1 est la page à laquelle il faut accéder.

Dans la page d'index, nous devons ajouter deux boutons personnalisés, à savoir « Aller à la page1 » et « Aller à la page2 ». Le code spécifique est le suivant :

<template>
  <view class="container">
    <view class="btns">
      <view class="btn" @click="toPage1">跳转到page1页面</view>
      <view class="btn" @click="toPage2">跳转到page2页面</view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      toPage1() {
        uni.navigateTo({
          url: '/pages/page1/page1'
        })
      },
      toPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .btns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

Grâce au code ci-dessus, nous avons ajouté avec succès deux boutons à la page et implémenté la fonction permettant de cliquer sur le bouton pour accéder à la page 1 et à la page 2.

Enfin, dans la page page1, on peut ajouter un bouton retour pour revenir à la page d'index. Le code spécifique est le suivant :

<template>
  <view class="container">
    <view class="title">这是page1页面</view>
    <view class="btn" @click="back">返回</view>
  </view>
</template>

<script>
  export default {
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

Grâce au code ci-dessus, nous avons ajouté avec succès le bouton de retour à la page page1 et implémenté la fonction permettant de cliquer sur le bouton pour revenir à la page d'index.

En résumé, grâce à l'exemple de code ci-dessus, nous pouvons implémenter avec succès la fonction de saut de bouton personnalisé dans Uniapp. Cela ajoute non seulement plus d'interactivité à l'application, mais améliore également l'expérience utilisateur de l'application.

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!