Comment adapter le bouton d'aspiration inférieur à l'iPhone X dans le mini programme WeChat (tutoriel détaillé)

Cet article présente principalement la solution consistant à adapter le bouton du bas de l'applet WeChat à l'iPhone qui arrive les uns après les autres, et les magnats autour d'eux les utilisent les uns après les autres. Parce que l'iPhone Il y a aussi quelques endroits où le. l'expérience utilisateur n'est pas bonne, principalement sur la page de détails du produit et la barre de boutons inférieure du panier, qui chevauchent la barre d'indicateur d'accueil. Cela facilite le déclenchement accidentel d'opérations gestuelles lorsque vous cliquez sur le bouton ci-dessous, comme indiqué ci-dessous :

Les captures d'écran proviennent d'Internet, violation et suppression

Si c'est un bug, il doit être corrigé, si c'est un problème d'expérience, il doit être optimisé, j'ai donc immédiatement acheté un iPhone X et j'ai commencé la recherche.

L'adaptation sur la page web est bonne, avec la balise méta viewport et la solution suivante pour le traitement. Pour plus de détails, veuillez consulter ici

Mais c'est assez embarrassant. De l'apparence des quatre coins coupés, on peut déduire que l'ajustement de la fenêtre dans le mini-programme couvre par défaut (deviné en fonction). sur les performances), mais il n'y a pas d'interface pour le faire, donc la solution d'adaptation de la page Web utilisant viewport-fix=cover combinée avec constant(safe-area-inset-bottom); À l'heure actuelle, nous n'avons vu aucun mini-programme doté d'interfaces ou de champs spéciaux pour iPhone X et autres écrans de forme spéciale. L'adaptation de la barre d'onglets inférieure du mini programme lui-même à l'iPhone X ajoute simplement une barre inférieure blanche, ce qui améliore la position de la barre d'onglets d'origine. Pourquoi dites-vous cela ? Parce que cela peut être vu sur notre page de panier, l'opération d'aspiration du bas de la page du panier n'est pas implémentée via position:fixed;bottom:0;, mais la valeur supérieure est calculée en fonction de la windowHeight - sa propre hauteur, simulant ainsi le fond suce, dans un petit Après l'adaptation de la nouvelle version du programme à l'iPhone X, le bouton en bas du panier était à moitié recouvert, ce qui a conduit à la conclusion ci-dessus.

{
 position: fixed;
 bottom: 0;
 width: 100%;
 height: constant(safe-area-inset-bottom);
 background-color: #fff;
}

Pour en revenir au sujet, puisqu'il n'existe pas de solution particulière pour obtenir cette valeur, nous ne pouvons obtenir les informations sur l'appareil que via l'interface wx.getSystemInfo. La méthode d'utilisation de cette interface est la suivante :

où le modèle est le modèle de l'appareil et d'autres informations, si le modèle contient un iPhone

wx.getSystemInfo({
 success: function(res) {
  console.log(res.model)
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
  console.log(res.language)
  console.log(res.version)
  console.log(res.platform)
 }
})

La valeur peut être lue dans la sous-page, par exemple, sur la page de détails du produit :

Donc, une solution simple pour s'adapter aux coins arrondis en bas de L'iPhone X est terminé.

<!-- goods.wxml -->
<view class="button-group {{isIpx?&#39;fix-iphonex-button&#39;:&#39;&#39;}}">这是一个吸底按钮区域</view>
// goods.js
let app = getApp();
Page({
  data: {
    isIpx: app.globalData.isIpx?true:false
  }
})
/* app.wxss */
.fix-iphonex-button {
  bottom:68rpx!important;
}
.fix-iphonex-button::after {
  content: &#39; &#39;;
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

Quant à la raison pour laquelle 68rpx est utilisé, parce que la largeur de l'écran de l'iPhone 🎜>

Les captures d'écran proviennent d'Internet, et elles ont été violées et supprimées

Il sera utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter deux files d'attente pour représenter une pile en JS

Comment implémenter les extrémités avant et arrière de le projet vue dans node Separation

Comment créer une application vue via vue-cli

Comment utiliser les filtres Angularjs pour implémenter la recherche dynamique

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!