mui原生底部选项卡实现（图片+文字）

最新推荐文章于 2025-10-13 20:44:04 发布

原创

最新推荐文章于 2025-10-13 20:44:04 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mui #原生 #底部选项卡

本文介绍了如何利用mui框架来创建带有图片和文字的原生底部选项卡。通过解析manifest.json文件和使用util.js进行配置，详细讲解了实现这一功能的关键步骤。

manifest.json代码：

"launchwebview": {
	"bottom": "0px",
	"background": "#fff",
	"subNViews": [
		{
			"id": "tabBar",
			"styles": {
				"bottom": "0px",
				"left": "0",
				"height": "75px",
				"width": "100%",
				"backgroundColor": "#fff"
			},
			"tags": [
				{
					"tag": "img",
					"id": "indexIcon",
					"src": "images/mipmap-xhdpi/icon_message.png",
					"position": {
						"top": "9px",
						"left": "13%",
						"width": "36px",
						"height": "36px"
					}
				}, {
					"tag": "font",
					"id": "indexText",
					"text": "消息",
					"position": {
						"top": "47px",
						"left": "0",
						"width": "33%",
						"height": "24px"
					},
					"textStyles": {
						"align": "center",
						"size": "15px"
					}
				},{
					"tag": "img",
					"id": "newsIcon",
					"src": "images/mipmap-xhdpi/icon_friend.png",
					"position": {
						"top": "9px",
						"left": "46%",
						"width": "36px",
						"height": "36px"
					}
				}, {
					"tag": "font",