uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法
前言
在uniapp中小程序的tabbar沒有設(shè)置圖標(biāo)大小的屬性，導(dǎo)致小程序在不同平臺(tái)打開時(shí)圖標(biāo)大小顯示的不一樣，特別是在電腦微信打開小程序時(shí)，底部的圖標(biāo)就會(huì)特別大，使得頁面看起來怪怪的，如下圖：
第一張是pc端H5，第二張是微信開發(fā)者工具(與手機(jī)端效果一樣)、第三張電腦微信打開的小程序。
所以既然代碼沒法調(diào)大小，自定義底部tabbar搞起來又很心累，那只好從圖片剪裁這方面來想辦法了。
解決辦法：
圖片切圖的時(shí)候,不要緊貼圖像切, 圖片四周留出相應(yīng)比例的空白。如下：
原圖：
剪裁后的圖片：四周留出空白部分
h5端用正常用原圖是沒問題的，小程序的話遇到類似問題可以參考這種方法試試。下面來看一下放到頁面上的效果吧
看著是不是好看點(diǎn)了呢哈哈
代碼可以用uniapp的編譯器（條件編譯）來處理
總結(jié)
到此這篇關(guān)于uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法的文章就介紹到這了,更多相關(guān)uniapp底部tabbar圖標(biāo)大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
- uniapp小程序自定義tabbar以及初次加載閃屏解決方法
- uniapp自定義tabbar的方法(支持中間凸起、角標(biāo)、動(dòng)態(tài)隱藏tab和全端適用)
- 小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)
- uniapp小程序配置tabbar底部導(dǎo)航欄實(shí)戰(zhàn)指南
- uniapp微信小程序底部動(dòng)態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
- uniapp如何使用uv-popup彈出框隱藏底部導(dǎo)航tabbar
相關(guān)文章
js對文字編碼有3個(gè)函數(shù)： escape,encodeURI,encodeURIComponent， 對應(yīng)的解碼函數(shù)：unescape,decodeURI,decodeURIComponent2008-06-06
js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法,涉及JavaScript數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
大家在開發(fā)JavaScript應(yīng)用的時(shí)候，如果遇到這種大量節(jié)點(diǎn)的情況，不妨將DocumentFragment作為一個(gè)備選的方案。2010-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
分享5個(gè)小技巧讓你寫出更好的 JavaScript 條件語句
在使用 JavaScript 時(shí)，我們常常要寫不少的條件語句。這里有五個(gè)小技巧，可以讓你寫出更干凈、漂亮的條件語句。需要的朋友跟隨小編一起學(xué)習(xí)吧2018-10-10
JavaScript數(shù)組常用方法實(shí)例講解總結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Angular服務(wù)器端渲染緩存功能問題，內(nèi)存緩存可用于應(yīng)用程序本身的渲染頁面和API請求。?兩種使用場合都通過開發(fā)包@ngx-ssr或cache提供2022-06-06
JavaScript封閉函數(shù)及常用內(nèi)置對象示例
這篇文章主要介紹了JavaScript封閉函數(shù)及常用內(nèi)置對象,結(jié)合實(shí)例形式分析了JavaScript封閉函數(shù)及常用內(nèi)置對象的定義與簡單使用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
微信小程序如何根據(jù)不同用戶切換不同TabBar(簡單易懂!)
小程序中我們可能需要根據(jù)不同的權(quán)限展示不同的tabbar,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何根據(jù)不同用戶切換不同TabBar的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04