アプレット下部のタブバーアイコンのサイズ設定
uniapp のアプレットのタブバーではアイコン サイズ属性が設定されていないため、アプレットを別のプラットフォームで開くとアイコン サイズが異なって表示されます。特にアプレットをコンピューター WeChat で開くと、下部のアイコンが表示されます。下の図に示すように、奇妙です。1
つ目は PC 上の H5、2 つ目は WeChat 開発者ツール (携帯電話と同じ効果)、3 つ目は開いた小さなプログラムです。コンピューター上のWeChatで。
したがって、コードのサイズは変更できず、下部のタブバーをカスタマイズするのは非常に面倒なので、画像クリッピングの側面から方法を見つける必要があります。
解決策:
画像を切り取るときは、画像の近くで切り取らず、画像の周囲に対応する割合の空白スペースを残します。以下のように:
元の画像:
トリミングされた画像: h5 末尾の周りの空白部分を残し
、通常どおり元の画像を使用します。小さなプログラムで同様の問題が発生した場合は、この方法を参考にして試してみてください。ページ上の効果を見てみましょう。
見た目は良くなりましたか? (笑)
コードはuniappのコンパイラで処理可能(条件付きコンパイル)