Comment configurer toutes les pages d'uniapp pour avoir des boutons flottants

Avec la popularité des applications mobiles, de plus en plus d'entreprises et de particuliers ont commencé à développer leurs propres applications mobiles. Pour les développeurs, offrir une meilleure expérience utilisateur est crucial. Le bouton flottant est un moyen d’offrir une meilleure expérience utilisateur. Aujourd'hui, je vais parler de la façon de configurer des boutons flottants sur toutes les pages d'uniapp.

uniapp est un framework de développement multiplateforme qui permet aux développeurs d'utiliser un ensemble de codes pour développer des applications pour diverses plates-formes telles que iOS et Android. De plus, le framework uniapp dispose d'un ensemble de bibliothèques de composants qui fournissent de nombreux composants couramment utilisés. Tels que les icônes icno, les boutons, etc. Il n’est donc pas difficile d’implémenter des boutons flottants.

Tout d'abord, nous devons créer un nouveau fichier .vue dans uniapp pour implémenter le composant bouton flottant. Le code est le suivant :

<template>
  <div class="float-button" @click="buttonClick">
    <icon type="add" size="28px" color="#fff" />
  </div>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
  components: { uniIcons },
  methods: {
    buttonClick() {
      // 点击事件
    }
  }
}
</script>

<style>
.float-button {
  position: fixed;
  right: 20px;
  bottom: 60px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #007aff;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 999;
}
</style>

Ce code définit un composant bouton flottant, qui contient un composant uni-icônes et un bouton rond avec un fond bleu.

Ensuite, nous devons utiliser ce composant dans toutes les pages.

Dans app.vue, introduisez ce composant avant le rendu de la page. Le code est le suivant :

<template>
  <div>
    <float-button />
    <router-view />
  </div>
</template>

<script>
import FloatButton from '@/components/float-button.vue'
export default {
  components: { FloatButton }
}
</script>

Ce code définit le modèle d'app.vue, qui contient le composant FloatButton et le composant router-view.

Enfin, importez le composant de bouton flottant dans tous les fichiers de page .vue et insérez dans