uni-app打包app tabbar图片问题

在没有云打包之前,在h5端,小程序端,手机端,全部都正常.但是打包成app了之后发现,tabbar的图标没有显示出来
我之前的tabbar是这样写的

"list": [{
				"pagePath": "pages/home/home",
				"text": "迷妮",
				"iconPath": "./static/icon/home-default.png",
				"selectedIconPath": "./static/icon/home-acitve.png"
			},
			{
				"pagePath": "pages/msg/msg",
				"text": "解读所",
				"iconPath": "./static/icon/news-default.png",
				"selectedIconPath": "./static/icon/news-active.png"
			},
			{
				"pagePath": "pages/profile/profile",
				"text": "秘密基地",
				"iconPath": "./static/icon/my-default.png",
				"selectedIconPath": "./static/icon/my-active.png"
			}
		]

修改成

"list": [{
				"pagePath": "pages/home/home",
				"text": "迷妮",
				"iconPath": "static/icon/home-default.png",
				"selectedIconPath": "static/icon/home-acitve.png"
			},
			{
				"pagePath": "pages/msg/msg",
				"text": "解读所",
				"iconPath": "static/icon/news-default.png",
				"selectedIconPath": "static/icon/news-active.png"
			},
			{
				"pagePath": "pages/profile/profile",
				"text": "秘密基地",
				"iconPath": "static/icon/my-default.png",
				"selectedIconPath": "static/icon/my-active.png"
			}
		]

再次打包就正常显示图标了
具体是什么原因,不太清楚

### 实现uni-app中弹框时隐藏底部标签栏 为了在uni-app应用中实现当弹出对话框时自动隐藏tabbar,并且在关闭对话框之后重新显示tabbar,可以通过监听特定事件来控制`uni.hideTabBar()`和`uni.showTabBar()`方法的调用。 #### 使用场景说明 在一个典型的uni-app项目结构下,在需要操作的地方引入这些API接口。通常情况下是在页面逻辑内处理这类交互行为,比如点击按钮触发模态框出现的同时执行隐藏动作[^4]。 #### JavaScript代码示例 下面是一个简单的例子展示了如何通过Vue实例的方法属性定义两个函数用于管理tabbar可见性的变化: ```javascript export default { data() { return { isDialogVisible: false, }; }, methods: { openDialog() { this.isDialogVisible = true; uni.hideTabBar({ animation: true, // 是否使用动画效果,默认true }); }, closeDialog() { this.isDialogVisible = false; uni.showTabBar({ animation: true, // 是否使用动画效果,默认true }); } } } ``` 此段脚本假设存在一个布尔类型的变量`isDialogVisible`用来追踪当前对话框的状态。每当打开或关闭对话框的时候都会改变这个状态并相应地调整tabbar的显示情况。 #### HTML模板部分 对于HTML方面,则只需要确保有能够触发展示/隐藏功能的操作元素即可,例如按钮或其他可点击区域: ```html <template> <!-- ...其他组件 --> <button @click="openDialog">Open Dialog</button> <!-- 对话框本身 --> <van-dialog v-model="isDialogVisible" show-cancel-button @confirm="closeDialog"> Content of dialog... </van-dialog> <!-- ...其他组件 --> </template> ``` 这里采用的是Vant Weapp UI库中的dialog组件作为示范,实际开发过程中可以根据个人喜好选用不同的UI框架[^1]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值