tabbar会挡住一部分内容，在chorme浏览器查看时是固定在底部，但用playground扫秒查看不会固定在底部

[TonyLuo]

在App.vue里加了tabbar，代码如下。tabbar会挡住一部分内容，在chorme浏览器查看时是固定在底部，但用playground扫秒查看却不会固定在底部

<template>
  <div class="v-app" style="flex-direction:column;" :style="{height:appHeight}">
    <u-header v-if="$route.path!=='/'">
      <v-icon slot="left" color="#fff" @click="$router.go(-1)">&#xe621;</v-icon>{{$store.getters.title}}<v-icon slot="right" color="#fff" @click="copy">&#xe666;</v-icon>
    </u-header>
    <!-- <scroller style="flex:1;"> -->
      <router-view></router-view>
    <!-- </scroller> -->
    <u-mask :show="$store.getters.maskVisiable" @click="onMaskClick">
      <u-select-popup :mask-show="$store.getters.maskVisiable" @hide-mask="$store.dispatch('toggleMask', false)"></u-select-popup>
      <u-loading v-if="$store.getters.loadingVisiable">2秒后消失</u-loading>
    </u-mask>
    <div class="v-tabbar">
      <!--<router-view></router-view>-->
      <u-tabbar :value="$route.path" router>
        <u-tabbar-item label="首页" index="/">&#xe64f;</u-tabbar-item>
        <u-tabbar-item label="购物车" index="/tabbar/cart">&#xe63f;</u-tabbar-item>
        <u-tabbar-item label="订单" index="/tabbar/order">&#xe655;</u-tabbar-item>
        <u-tabbar-item label="我的" index="/tabbar/my">&#xe659;</u-tabbar-item>
      </u-tabbar>

    </div>
  </div>
</template>
<script>
const clipboard = weex.requireModule('clipboard')
const modal = weex.requireModule('modal')
export default {
  data () {
    return {
      appHeight: weex.config.deviceHeight + 'px'
    }
  },
  methods: {
    copy () {
      clipboard.setString(weex.config.bundleUrl)
      modal.toast({ message: '已复制地址', duration: 0.3 })
    },
    onMaskClick () {
      if (!this.$store.getters.loadingVisiable) {
        this.$store.dispatch('toggleMask', false)
      }
    }
  }
}
</script>
<style scoped>
.v-app {
  background-color: #f9fafc;

}
.v-tabbar{

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

</style>