uni-app的tabBar配置@1x、@2x、@3x图标
时间: 2023-09-30 22:04:48 浏览: 102
在uni-app中,可以通过以下方式配置不同分辨率的TabBar图标:
1. 准备好三种不同分辨率的TabBar图标,分别为@1x、@2x、@3x。
2. 在项目根目录下找到manifest.json文件,在其中找到“tabBar”节点。
3. 在“tabBar”节点中,分别设置不同分辨率TabBar图标的路径,例如:
```
"tabBar": {
"color": "#999",
"selectedColor": "#007AFF",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home@1x.png",
"selectedIconPath": "static/tabbar/home@3x.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/tabbar/mine@1x.png",
"selectedIconPath": "static/tabbar/mine@3x.png"
}
]
}
```
在上述代码中,"iconPath"表示@1x分辨率的TabBar图标路径,"selectedIconPath"表示@3x分辨率的TabBar图标路径。如果需要设置@2x分辨率的TabBar图标,可以在"list"节点中添加一个"iconPath"属性和一个"selectedIconPath"属性来分别设置。
4. 将三种分辨率的TabBar图标放置在对应的路径下,例如上述代码中的"static/tabbar"文件夹下。
通过以上配置,uni-app会自动根据设备分辨率选择对应的TabBar图标。
阅读全文