uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法
前言
在uniapp中小程序的tabbar沒(méi)有設(shè)置圖標(biāo)大小的屬性，導(dǎo)致小程序在不同平臺(tái)打開時(shí)圖標(biāo)大小顯示的不一樣，特別是在電腦微信打開小程序時(shí)，底部的圖標(biāo)就會(huì)特別大，使得頁(yè)面看起來(lái)怪怪的，如下圖：
第一張是pc端H5，第二張是微信開發(fā)者工具(與手機(jī)端效果一樣)、第三張電腦微信打開的小程序。
所以既然代碼沒(méi)法調(diào)大小，自定義底部tabbar搞起來(lái)又很心累，那只好從圖片剪裁這方面來(lái)想辦法了。
解決辦法：
圖片切圖的時(shí)候,不要緊貼圖像切, 圖片四周留出相應(yīng)比例的空白。如下：
原圖：
剪裁后的圖片：四周留出空白部分
h5端用正常用原圖是沒(méi)問(wèn)題的，小程序的話遇到類似問(wèn)題可以參考這種方法試試。下面來(lái)看一下放到頁(yè)面上的效果吧
看著是不是好看點(diǎn)了呢哈哈
代碼可以用uniapp的編譯器（條件編譯）來(lái)處理
總結(jié)
到此這篇關(guān)于uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法的文章就介紹到這了,更多相關(guān)uniapp底部tabbar圖標(biāo)大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(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)文章
這篇文章主要介紹了如何選擇適合你的JavaScript框架，如何選擇一個(gè)高效的JS框架經(jīng)驗(yàn)之談。2017-11-11
參考discuz的msn聊天功能代碼2008-05-05
這篇文章主要介紹了新版小程序登錄授權(quán)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12![JavaScript 拾碎[三] 使用className屬性](http://img.jbzj.com/images/xgimg/bcimg3.png)
JavaScript 拾碎[三] 使用className屬性
Javascript 還可以通過(guò)className 屬性靈活的更改一個(gè)標(biāo)簽元素的CSS 類選擇器來(lái)實(shí)現(xiàn)樣式的變化。2010-10-10
Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap面板（Panels）的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Echarts實(shí)例教程之樹形圖表的實(shí)現(xiàn)方法
眾所周知echarts是一個(gè)純JavaScript的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于Echarts實(shí)例之樹形圖表的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了微信小程序靜默登錄的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Javascript字符串瀏覽器兼容問(wèn)題,實(shí)例形式對(duì)比分析了不兼容字符串與兼容字符串的區(qū)別,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
JavaScript雙問(wèn)號(hào)(??)操作符用法詳解
在現(xiàn)代JavaScript開發(fā)中,處理變量默認(rèn)值是一個(gè)常見(jiàn)但容易引發(fā)bug的操作,很多開發(fā)者可能都遇到過(guò)這樣的問(wèn)題：使用||設(shè)置默認(rèn)值時(shí),意外覆蓋了0、''等合法值,這時(shí)候,ES2020引入的雙問(wèn)號(hào)操作符（??）就能完美解決這類問(wèn)題,本文將帶您全面掌握這個(gè)操作符的使用場(chǎng)景和高級(jí)技巧2025-04-04
JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼
這篇文章主要介紹了JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼,包括生成0到1之間的隨機(jī)浮點(diǎn)數(shù)、指定范圍的隨機(jī)整數(shù)和浮點(diǎn)數(shù)、從數(shù)組中隨機(jī)選擇元素、生成隨機(jī)顏色以及生成指定數(shù)目和范圍的隨機(jī)數(shù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04