javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp底部tabbar图标大小

uniapp小程序底部tabbar图标大小设置办法

作者:小太阳!

这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下

前言

在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得页面看起来怪怪的,如下图:

请添加图片描述

第一张是pc端H5,第二张是微信开发者工具(与手机端效果一样)、第三张电脑微信打开的小程序。

所以既然代码没法调大小,自定义底部tabbar搞起来又很心累,那只好从图片剪裁这方面来想办法了。

解决办法:

图片切图的时候,不要紧贴图像切, 图片四周留出相应比例的空白。如下:

原图:

剪裁后的图片:四周留出空白部分

h5端用正常用原图是没问题的,小程序的话遇到类似问题可以参考这种方法试试。下面来看一下放到页面上的效果吧

看着是不是好看点了呢哈哈

代码可以用uniapp的编译器(条件编译)来处理

总结 

到此这篇关于uniapp小程序底部tabbar图标大小设置办法的文章就介绍到这了,更多相关uniapp底部tabbar图标大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文