uniapp アプレットの下部にあるタブバー アイコンのサイズ設定

アプレット下部のタブバーアイコンのサイズ設定

uniapp のアプレットのタブバーではアイコン サイズ属性が設定されていないため、アプレットを別のプラットフォームで開くとアイコン サイズが異なって表示されます。特にアプレットをコンピューター WeChat で開くと、下部のアイコンが表示されます。下の図に示すように、奇妙です。1
画像の説明を追加してください
つ目は PC 上の H5、2 つ目は WeChat 開発者ツール (携帯電話と同じ効果)、3 つ目は開いた小さなプログラムです。コンピューター上のWeChatで。

したがって、コードのサイズは変更できず、下部のタブバーをカスタマイズするのは非常に面倒なので、画像クリッピングの側面から方法を見つける必要があります。
解決策:
画像を切り取るときは、画像の近くで切り取らず、画像の周囲に対応する割合の空白スペースを残します。以下のように:
元の画像:
ここに画像の説明を挿入

トリミングされた画像: h5 末尾の周りの空白部分を残し
ここに画像の説明を挿入
ここに画像の説明を挿入
、通常どおり元の画像を使用します。小さなプログラムで同様の問題が発生した場合は、この方法を参考にして試してみてください。ページ上の効果を見てみましょう。
ここに画像の説明を挿入
見た目は良くなりましたか? (笑)

コードはuniappのコンパイラで処理可能(条件付きコンパイル)
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/yangsi0706/article/details/128467828