uniapp设置tabbar高度无效
时间: 2023-08-25 21:07:43 浏览: 256
Uniapp中设置tabbar高度的方法是通过在pages.json文件中的"globalStyle"属性下添加"tabBar"属性来进行设置,如下所示:
```
"globalStyle": {
"tabBar": {
"height": "100px"
}
}
```
但是,如果设置后发现高度无效,可能是由于以下原因:
1. 所设置的高度值不合法或者不够大,可以尝试设置更大的值或者使用rem单位来进行设置;
2. 在tabbar组件中设置了固定高度,导致全局设置无效,可以尝试在tabbar组件中通过style属性来进行高度设置,如下所示:
```
<uni-tabbar style="height: 100px;">
...
</uni-tabbar>
```
3. 其他样式冲突或者覆盖,可以通过浏览器调试工具查看样式规则的优先级以及是否存在覆盖。
相关问题
uniapp设置tabbar height无效
可能是因为设置的高度不够大,或者是被其他样式覆盖了。可以尝试在样式中加上 !important 来确保样式生效,例如:
```
.tabbar {
height: 100px !important;
}
```
如果还是无效,可以检查一下是否有其他样式影响了 tabbar 的高度,或者在页面中使用了其他组件导致高度被覆盖。
uniapp设置tabbar高度
在UniApp中设置TabBar的高度可以通过修改全局样式来实现。具体步骤如下:
1. 打开项目的根目录,在`App.vue`文件中找到`<style>`标签。
2. 在`<style>`标签中添加以下代码:
```css
/* 修改TabBar的高度 */
.uni-tabbar {
height: 60px; /* 设置你想要的高度,单位可以是px、rem等 */
}
```
3. 保存文件,重新编译运行项目,TabBar的高度就会被修改为你设置的值。
需要注意的是,以上方法会全局修改所有页面的TabBar高度。如果你只想修改某个页面的TabBar高度,可以在对应页面的`<style>`标签中添加相应的样式。
阅读全文
相关推荐
















