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

这篇具有很好参考价值的文章主要介绍了uniapp小程序底部tabbar图标大小设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得页面看起来怪怪的,如下图:
uniapp小程序底部tabbar图标大小设置
第一张是pc端H5,第二张是微信开发者工具(与手机端效果一样)、第三张电脑微信打开的小程序。

所以既然代码没法调大小,自定义底部tabbar搞起来又很心累,那只好从图片剪裁这方面来想办法了。
解决办法:
图片切图的时候,不要紧贴图像切, 图片四周留出相应比例的空白。如下:
原图:
uniapp小程序底部tabbar图标大小设置

剪裁后的图片:四周留出空白部分
uniapp小程序底部tabbar图标大小设置
uniapp小程序底部tabbar图标大小设置
h5端用正常用原图是没问题的,小程序的话遇到类似问题可以参考这种方法试试。下面来看一下放到页面上的效果吧
uniapp小程序底部tabbar图标大小设置
看着是不是好看点了呢哈哈

代码可以用uniapp的编译器(条件编译)来处理
uniapp小程序底部tabbar图标大小设置文章来源地址https://www.toymoban.com/news/detail-504376.html

到了这里,关于uniapp小程序底部tabbar图标大小设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现

            先看效果是否可以满足你们,如果可以满足你只要一步一步照着做绝对没有错。         本人技术不佳,研究了一整天,全网的大佬们写的博客看的晕头转向,避免大伙再走弯路,跟着我以下步骤一点一点来绝对可以实现。         最终效果图: (如果你

    2024年02月04日
    浏览(51)
  • uniapp 开发小程序之实现不同身份展示不同的 tabbar(底部导航栏),附带相关问题解答

    效果展示:   引言 在开发过程中逐渐意识到uniapp原生的tabbar可能不能满足开发要求,通过浏览博客才选择使用uView的Tabbar 底部导航栏来实现,我选择用的是2X版本 安装 我是使用Hbuilder插件的方式引入的组件库,安装配置可以看这篇: 下载安装方式配置 | uView 2.0 - 全面兼容

    2024年02月11日
    浏览(41)
  • 微信小程序设置 tabbar icon 大小

    微信小程序的 tabbar icon 大小可以通过以下方式进行设置: 将 tabbar icon 图片制作成合适的尺寸:你可以使用设计工具(如 Photoshop、Sketch 等)将图标调整为合适的大小。通常建议使用 48x48 或 60x60 像素的图标。 在 app.json 文件中设置 tabbar 图标大小:在 app.json 文件的 tabBar 字段

    2024年02月13日
    浏览(41)
  • 【易售小程序项目】顶部导航栏和底部导航栏设置+iconfont图标引入

    在正式开发小程序的功能之前,首先需要确定小程序的主要框架。 我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”,“首页”已经存在于项目中,不需要重复创建。创建过程如下: 创建成功,不仅创建了 star.vue , Hbuilder 还自动帮助创建了 star 文件

    2024年02月10日
    浏览(42)
  • uniapp 配置 底部 TabBar

    前言:写代码是需要团队的,需要跟更厉害的代码高手共同维护项目,需要一个环境,而我现在的环境利于我Vue技术的成长,从而我现在将react 技术搁置。 学习的重要途经就是查官网,所以,我直接登陆uniapp官网,并在其中搜索 tabBar组件,找到了它在package.json的配置方式,

    2024年02月09日
    浏览(49)
  • uniapp和小程序设置tabBar和显示与隐藏tabBar

    (1)设置tabBar: index number 是 tabBar 的哪一项,从左边算起,索引从0开始 text string 否 tab 上按钮文字 iconPath string 否 图片路径 selectedIconPath string 否 选中时的图片路径 pagePath string 否 页面绝对路径 visible boolean 否 tab 是否显示 (2)显示tabBar: (3)隐藏tabBar:

    2024年02月08日
    浏览(39)
  • uniapp开发小程序,设置iphone底部安全区域

    上面dom结构的,根据需求是这样的:整个屏幕被两个view占满,其中底部view是固定在底部不动的,content内容立马是高度盛满剩下屏幕高度,并且overflow:scorll ; safeArea里面的动态样式中的safeAreaBottom是vuex保存的值,后面加的114,是底部高度再略高一点:“100+14” ,其中14你给

    2024年02月12日
    浏览(57)
  • 一文读懂uniapp中的tabBar底部导航

    UniApp 中的 tabBar 是用来在应用程序底部显示可切换的选项卡的组件,通常用于实现底部导航栏 允许用户通过点击不同的选项卡来切换应用程序的不同页面或功能模块 其代码如下: 对应的组件属性如下: list : tabBar 的列表,每个选项卡都包含了图标、文字和对应的页面路径

    2024年04月25日
    浏览(27)
  • Uniapp根据权限(角色)不同动态展示底部tabbar

    比如绑定openId展示的tabbar为:首页、巡检、工单 未绑定openId展示的tabbar为:在线报修、我的报修 首页配置pages.json中的tabbar: 这里只用配置pagePath就可以了~ 具体代码如下: 创建一个自定义的tabbar文件: 具体代码如下: 注意:pagePath的最前面要   加  / 创建index.js文件配置

    2024年04月26日
    浏览(48)
  • uniapp h5 tabBar兼容IOS手机底部黑线

    uniapp自定义tabBar方案 一、pages.json文件中添加tarBar 二、把原生的tabBar隐藏起来 三、自定义一个tabBar组件         //重点代码         height: 50px;         padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部         padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS11.2*/ 四、

    2024年02月09日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包