WeChat ミニプログラムで底部の吸引ボタンを iPhone X に適合させる方法 (詳細なチュートリアル)

この記事では、主に下部ボタンをiPhoneに適応させる解決策を紹介します。なぜなら、iPhoneの貧弱なエクスペリエンスの主な欠点は、商品詳細ページとショッピングの下部にあるボタンバーです。カートはホーム インジケーター バーと重なるため、以下に示すように、下のボタンをクリックすると、誤ってジェスチャー操作がトリガーされやすくなります。

スクリーンショットはインターネットからのものです。削除がバグである場合は、削除する必要があります。それがエクスペリエンスの問題である場合は、最適化する必要があるため、すぐに iPhone X を入手して調査を開始しました。

Web ページでの適応は良好で、ビューポート メタ タグと次の処理ソリューションが使用されています。詳しくはこちらをご覧ください

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

しかし、四隅が切れている様子から、ミニプログラムのビューポートフィットがデフォルトでカバーされていることが推測できますが（性能から推測）、これを変更するインターフェースがないため、Web ページ側は、constant(safe-area-inset-bottom) と組み合わせた viewport-fix=cover の適応ソリューションは、小規模なプログラムには適していません。現時点では、iPhone X やその他の特殊な形状の画面用の特別なインターフェイスやフィールドを備えたミニ プログラムは確認されていません。ミニ プログラムの下部タブ バーを iPhone X に適応させると、単純に白い下部バーが追加され、元のタブ バーの位置が改善されます。なぜそう言えるのでしょうか。これはショッピング カート ページから確認できるため、ショッピング カート ページの下部の吸引操作はposition:fixed;bottom:0; によって実装されていませんが、上部の値は windowHeight 自体の高さに基づいて計算され、それによってシミュレートされます。新しいバージョンのプログラムが iPhone X に適用された後、ショッピング カートの下部にあるボタンが半分覆われ、上記の結論に至りました。

本題に戻りますが、この値を取得するための特別な解決策はないため、wx.getSystemInfo インターフェースを介してのみデバイス情報を取得できます。このインターフェースの使用方法は次のとおりです。

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)
 }
})

モデルはモデルであり、デバイスのその他の情報。モデルに iPhone X が含まれている場合、デバイスは iPhone X と見なされます。これをエントリ ファイル app.js で検出し、isIpx フィールドをグローバルに追加し、結果を isIpx に割り当てます。

値は、たとえば製品詳細ページのサブページで読み取ることができます:

<!-- 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;
}

これで、iPhone X の下部の丸い角に適応する簡単な解決策が完成しました。

なぜ68rpxが使われるかというと、iPhoneの画面幅だからです

スクリーンショットはインターネットからのもので、侵害と削除です

上記は私がまとめたものです。未来。

関連記事:

JS でスタックを表す 2 つのキューを実装する方法

node の vue プロジェクトでフロントエンドとバックエンドの分離を実現する方法

vue アプリケーションを構築する方法vue-cli を通して

使用法 Angularjs フィルターが動的検索を実装する方法

以上がWeChat ミニプログラムで底部の吸引ボタンを iPhone X に適合させる方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。