Vous apprendre étape par étape comment implémenter des boutons flottants dans des mini-programmes (exemple de code)

Comment implémenter des boutons flottants dans les mini programmes ? L'article suivant vous présentera comment implémenter la fonction de bouton flottant dans un mini programme. J'espère qu'il vous sera utile !

Dans le développement quotidien de petits programmes, nous pouvons avoir besoin de faire flotter le bouton pour qu'il ne change pas de position au fur et à mesure que la page glisse. Par exemple, le bouton de partage sur la page de détails de l'article, je souhaite le créer. on dirait qu'il flotte. Ou définissez un bouton flottant sur la page d'accueil pour implémenter certaines fonctions évolutives, ce qui est à la fois beau et pratique

Je vais expliquer l'implémentation du bouton flottant sous deux aspects, l'un consiste à implémenter l'image. bouton, et l’autre consiste à faire flotter le bouton. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Implémentation des boutons d'image

Dans le composant bouton fourni par le mini-programme, il n'y a pas de fonction pour définir séparément les images dans les boutons, bien que le mini-programme ne prenne pas en charge les composants naturels. , nous pouvons obtenir cet effet par vous-même

Premier code

code de page

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></image>
</button>

code de style CSS

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

.image {
  width: 64rpx;
  height: 64rpx;
}

circle est la classe de bouton, image est la classe d'image

Le code est très simple, Xiaodan expliquera le ci-dessus pour tout le monde Le code

• masquer l'affichage du bouton

  Nous voulons afficher l'image, donc pour masquer le bouton, plain='true' peut être réalisé avec cet attribut.

• Masquer la bordure du bouton

  En plus de masquer le bouton, vous devez également masquer sa bordure. Le style css correspondant est : border: none Il est à noter ici que la classe css doit être. ajouté [plain]

  Par exemple .circle[plain] , la bordure ne peut pas disparaître si elle n'est pas ajoutée.

• Alignement de l'image et du bouton

  La taille de l'image doit être cohérente avec la taille du bouton Afin d'obtenir l'alignement, le style CSS dans le bouton doit être définipadding:0

. Implémentation du bouton flottant

Paramètres du bouton d'image D'accord, nous devons le faire flotter. Pour obtenir l'effet flottant, il nous suffit de définir la position du style du bouton sur fixe

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

position est l'attribut de position, qui a de nombreuses valeurs différentes. . Jetons un coup d'œil à la définition officielle donnée de fix

ne réserve pas d'espace pour l'élément, mais spécifie la position de l'élément en spécifiant sa position par rapport à la fenêtre d'affichage. La position de l'élément ne change pas lorsque l'écran défile. Lors de l'impression, l'élément apparaîtra à un emplacement fixe sur chaque page. L'attribut fixe crée un nouveau contexte d'empilement. Lorsque l'attribut de transformation de l'ancêtre d'un élément n'est pas aucun, le conteneur passe de la fenêtre d'affichage à cet ancêtre.

Nous avons entièrement implémenté le code du bouton flottant. Jetons un coup d'œil à l'effet spécifique

Résumé

L'implémentation de l'ensemble du bouton flottant n'a en fait pas beaucoup de code. maîtriser la connaissance du CSS C'est plus approfondi et pas si difficile à mettre en œuvre. L'implémentation de boutons flottants n'est qu'un accompagnement.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!