Comment implémenter la boîte contextuelle Uniapp

Avec la popularité de l'Internet mobile, de plus en plus de personnes commencent à utiliser des smartphones et des tablettes pour des activités en ligne. Parallèlement à cela, la demande d’applications mobiles et de conception Web augmente également. UniApp est un cadre de développement multiplateforme qui résout ce problème. Il fournit une solution de développement multiplateforme capable d'obtenir un ensemble de codes et l'effet de s'exécuter sur plusieurs terminaux, y compris, mais sans s'y limiter, iOS, Android, H5 et d'autres plates-formes. .

Cet article traite principalement de la boîte pop-up dans le framework UniApp.

Dans le framework UniApp, la boîte contextuelle est l'un des composants couramment utilisés. Elle peut nous aider à inviter l'utilisateur sous la forme d'une fenêtre contextuelle sur le client, comme la confirmation des opérations, l'obtention de la connexion utilisateur et autres. informations, etc Par conséquent, comment implémenter la boîte contextuelle UniApp est l'une des compétences que nous devons maîtriser.

1. L'utilisation des boîtes contextuelles UniApp

Le framework UniApp propose deux types différents de boîtes contextuelles pour nous aider à répondre à différents besoins. Jetons un coup d'œil à l'une des utilisations de base :

• Utilisez alert() pour afficher des informations textuelles simples

Dans le framework UniApp, vous pouvez utiliser la méthode alert() pour afficher des informations textuelles simples à l'utilisateur sous le formulaire d'une fenêtre pop-up :

uni.alert({
  title: '提示信息',
  content: '这是一条简单的弹出提示',
  success: function () {
     console.log('弹出框已关闭')
  }
});

Parmi eux, le titre est le titre de la boîte pop-up, le contenu est le contenu principal de la boîte pop-up et le succès est la fonction de rappel après la fermeture de la boîte pop-up Bien entendu, la fonction de rappel du bouton d'annulation peut également être implémentée via l'annulation.

• Utilisez confirm() pour obtenir la sélection de l'utilisateur

Dans le framework UniApp, nous pouvons également utiliser la méthode confirm() pour faire apparaître la boîte d'invite de sélection, par exemple :

uni.confirm({
  title: '选择操作',
  content: '你确定要进行某个操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确认操作');
    } else if (res.cancel) {
      console.log('用户取消操作');
    }
  }
});

Dans le code ci-dessus, le confirm( ) La méthode apparaîtra. Une boîte d'invite de sélection invite l'utilisateur à faire une sélection. Une fois que l'utilisateur a terminé la sélection, nous obtiendrons la sélection de l'utilisateur via la fonction de rappel et effectuerons les opérations correspondantes sur le résultat de la sélection. Parmi eux, res.confirm indique que l'utilisateur confirme l'opération, et res.cancel indique que l'utilisateur annule l'opération.

2. Implémenter une boîte contextuelle UniApp personnalisée

En plus d'utiliser les méthodes intégrées fournies par le framework, nous pouvons également personnaliser la boîte contextuelle pour obtenir un effet plus flexible. Voyons maintenant comment implémenter une boîte contextuelle UniApp personnalisée.

1. Mise en page HTML

Tout d'abord, nous devons préparer la mise en page HTML d'une boîte contextuelle, par exemple :

<template>
  <view class="modal">
    <view class="modal-content">
      <view class="modal-header">
        <h2>弹出框标题</h2>
        <i class="fa fa-times" @click="closeModal"></i>
      </view>
      <view class="modal-body">
        <p>这里是弹出框的主体内容</p>
      </view>
      <view class="modal-footer">
        <button type="button" @click="submit">确定</button>
        <button type="button" @click="closeModal">取消</button>
      </view>
    </view>
  </view>
</template>

Dans la mise en page ci-dessus, nous utilisons le composant View pour obtenir différents effets de style à travers différentes classes attributs. , nous avons également utilisé des instructions Vue telles que @click pour lier les événements de clic.

2. Style CSS

Ensuite, nous devons traiter davantage le style de la boîte contextuelle pour la rendre plus belle et plus raisonnable, par exemple :

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal-content {
  width: 400rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal .modal-content .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
}

.modal .modal-content .modal-header h2 {
  margin: 0;
}

.modal .modal-content .modal-header i {
  font-size: 20rpx;
  cursor: pointer;
}

.modal .modal-content .modal-body {
  padding: 20rpx;
}

.modal .modal-content .modal-footer {
  background-color: #eeeeee;
  padding: 10rpx;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-content .modal-footer button {
  border: none;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.modal .modal-content .modal-footer button:first-child {
  background-color: #337ab7;
  color: #ffffff;
}

.modal .modal-content .modal-footer button:last-child {
  background-color: #dddddd;
  color: #333333;
}

Dans le style CSS ci-dessus, nous avons utilisé certaines techniques CSS, via Les identifiants de pseudo-classe tels que :after et :before implémentent les effets de style de plusieurs groupes de boutons. En même temps, nous utilisons également des règles telles que @keyframes pour définir les effets d'animation.

3. Code JS

Enfin, nous devons écrire du code JS pour implémenter les fonctions spécifiques de la boîte pop-up, telles que :

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    submit() {
      console.log('执行提交操作');
      this.closeModal();
    }
  }
}

Dans le code ci-dessus, nous utilisons la méthode data() pour définir une donnée attribut nommé visible , utilisé pour stocker l'état d'affichage et de fermeture de la boîte pop-up. Parallèlement, nous avons également défini trois méthodes : showModal(), closeModal() et submit(), qui sont utilisées respectivement pour contrôler l'affichage et la fermeture de la boîte contextuelle et le comportement du clic du bouton de confirmation.

4. Utilisation de la page

Après avoir terminé les étapes ci-dessus, nous pouvons utiliser notre boîte contextuelle personnalisée dans une page spécifique, par exemple :

<template>
  <view>
    <button type="button" @click="showModal">打开弹出框</button>
    <modal :visible.sync="visible"></modal>
  </view>
</template>

<script>
import Modal from '@/components/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la méthode d'écriture du composant Vue, via l'importation syntaxe, le composant Modal que nous avons défini est introduit, puis, dans la méthode data(), un attribut de données nommé visible est également défini. Dans le modèle, nous appelons la méthode showModal via l'événement de liaison @click de la balise bouton pour afficher la boîte contextuelle.

3. Résumé

À ce stade, nous avons terminé le processus complet de personnalisation de la boîte contextuelle UniApp. D'une manière générale, le composant de boîte contextuelle fourni par UniApp possède des méthodes intégrées telles que alert() et confirm(), qui peuvent répondre aux besoins de base. Si vous avez besoin d'une boîte contextuelle plus complexe, vous pouvez utiliser une mise en page HTML ; Style CSS, code JS, etc. Dans cet aspect, l'effet de personnalisation de la boîte contextuelle peut être obtenu. J'espère que cet article pourra être utile au travail de développement UniApp de chacun.

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!