[youzan/vant]Tabbar 标签栏打包后无法固定在页面底部

使用Tabbar 标签栏，开发时样式无问题，打包部署后发现无法固定在页面底部，Debug发现样式被覆盖

default

Environment

Device: Mac
Browser: Chrome
Vant Version: 1.2.0

新建简单的项目，主页面代码如下：

<div id="app">
        <router-view />
        <van-tabbar v-model="active" style="z-index: 1999;">
            <van-tabbar-item v-for="(tab, index) in tabbar" :icon="tab.icon" :to="tab.path" :dot="tab.dot" :info="tab.info" :key="index">
                {{tab.name}}
            </van-tabbar-item>
        </van-tabbar>
    </div>

然后打包

JerryMissTom

没遇到这个问题，建议你看下引入样式的顺序是不是错误了

chenjiahan

我在此页引入了样式如下，

import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/tabbar.css';

打包后tabbar的样式所在的css文件在head靠前的位置，然后会被后面的css文件中的样式覆盖，可以看下我图中的两个css文件

JerryMissTom

打包配置的问题，需要保证引入顺序正确

chenjiahan

所以最后是怎么解决的呢，我也有同样的问题，打包后tabbar的导航栏无法固定在页面底部

mfl512

@mfl512 我们的解决方案是： <van-tabbar style="z-index: 1999; position: fixed ">，你可以参考一下

JerryMissTom

[youzan/vant]Tabbar 标签栏打包后无法固定在页面底部

回答

相关问题