使用vue-router,router-view中的内容跟外面的内容连在了一起

Question

使用vue,vux搭建移动端界面,用vux里面的tabbar组件做导航,vue-router做页面跳转,

正常的效果是上面这样的,但是我把页面往下滚的时候,底部的导航栏就出问题了,

代码如下:
app.vue:

<template>
  <div id="app">
    <!-- main content -->
    
    <!-- drawer content -->
      
       
        <router-view class="router-view" style="height: 200px"></router-view>
        
        <tabbar icon-class="vux-center" class="vux-demo-tabbar" slot="bottom">
          <tabbar-item selected link="/">
            <span slot="icon" class="iconfont" >&#xe614;</span>
            <span slot="label">商品管理</span>
          </tabbar-item>
          <tabbar-item link="/order">
          <span slot="icon" class="iconfont" >&#xe616;</span>
            <span slot="label">订单管理</span>
          </tabbar-item>
          
          <tabbar-item >
          <span slot="icon" class="iconfont" >&#xe61e;</span>
            <span slot="label">我的</span>
          </tabbar-item>
        </tabbar>
        
    
  </div>
</template>

main.js:

const routes = [{
  path: '/',
  component: Commodity
  },{
    path:'/order',
    component:Order
  }]

const router = new VueRouter({
  routes
})

commondity.js:

<template>
  <div style="height: 300px">
    <x-header :left-options="{showBack: false}">商品管理<a slot="right" class="iconfont">&#xe617;</a></x-header>
    <group>
      <panel   :list="goodslist" :type="type"></panel>
      
      
    </group>
  </div>
</template>

Answer 1

这个看着是tabbar的样式问题吧，没有相对window做fixed。

如果不是的话，贴css出来再看看。或者给个demo链接

Answer 2

style="position:fixed" 加一个样式就可以

Answer 3

在tabbar标签外再套一层div，给个类名tab，然后在底部style里设置样式

   .tab /deep/ .weui-tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        box-shadow: 0px 20px 20px 20px #ccc;
        &::before {
            border-top: 0px;
        }
    }

Answer 4

tabbar 默认定位为 absolute 定位，主要是用于 100% 布局。如果你没有使用 100% 布局或者 view-box 组件，请手动设置定位为 fixed。

Answer 5

我觉得是定位问题，tabbar用fixed定位在最底部