vux-ui 用了tabbar后怎么使用全屏組件

問(wèn)題

項(xiàng)目用了vux-ui ，使用tabbar 來(lái)導(dǎo)航。后來(lái)在子路由里面使用全屏組件發(fā)現(xiàn)組件fixed 層級(jí)設(shè)置再怎么高，都無(wú)法覆蓋住tabbar ，請(qǐng)問(wèn)如何解決？

代碼

<template>
  <div id="app" style="height: 100%">
    <drawer>
      <view-box>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </view-box>
    </drawer>
    <tabbar>
      <tabbar-item link="/index" :selected="$route.path == '/index'">
        <span slot="icon" class="iconfont icon-home"></span>
        <span slot="label">首頁(yè)</span>
      </tabbar-item>
      <tabbar-item link="/storeCenter" :selected="$route.path == '/storeCenter'">
        <span slot="icon" class="iconfont icon-store"></span>
        <span slot="label">門店</span>
      </tabbar-item>
      <tabbar-item link="/explore" :selected="$route.path == '/explore'">
        <span slot="icon" class="iconfont icon-search"></span>
        <span slot="label">發(fā)現(xiàn)</span>
      </tabbar-item>
      <tabbar-item show-dot link="/me" :selected="$route.path == '/me'">
        <span slot="icon" class="iconfont icon-wode"></span>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

截圖

圖片描述

回答

編輯回答

護(hù)她命

||判斷測(cè)試可以

<tabbar v-show="$route.path == '/index' || $route.path == '/storeCenter' || $route.path == '/explore' || $route.path == '/me'" slot="bottom">
      <tabbar-item link="/index" :selected="$route.path == '/index'">
        <span slot="icon" class="iconfont icon-home"></span>
        <span slot="label">首頁(yè)</span>
      </tabbar-item>
      <tabbar-item link="/storeCenter" :selected="$route.path == '/storeCenter'">
        <span slot="icon" class="iconfont icon-store"></span>
        <span slot="label">門店</span>
      </tabbar-item>
      <tabbar-item link="/explore" :selected="$route.path == '/explore'">
        <span slot="icon" class="iconfont icon-search"></span>
        <span slot="label">發(fā)現(xiàn)</span>
      </tabbar-item>
      <tabbar-item show-dot link="/me" :selected="$route.path == '/me'">
        <span slot="icon" class="iconfont icon-wode"></span>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

2018年5月24日 20:28

編輯回答

念舊

直接tabbar控件用一個(gè)控制變量來(lái)顯示隱藏。
`<tabbar class="vux-demo-tabbar" icon-class="vux-center" v-show="!isTabbarDemo" slot="bottom">

      <tabbar-item :link="{path:'/'}" :selected="route.path === '/'">
        <span class="demo-icon-22 vux-demo-tabbar-icon-home" slot="icon" style="position:relative;top: -2px;">&#xe637;</span>
        <span slot="label">Home</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/demo'}" :selected="isDemo" badge="9">
        <span class="demo-icon-22" slot="icon">&#xe633;</span>
        <span slot="label"><span v-if="componentName" class="vux-demo-tabbar-component">{{componentName}}</span><span v-else>Demos</span></span>
      </tabbar-item>
      <tabbar-item :link="{path:'/project/donate'}" :selected="route.path === '/project/donate'" show-dot>
        <span class="demo-icon-22" slot="icon">&#xe630;</span>
        <span slot="label">Donate</span>
      </tabbar-item>
    </tabbar>`

2017年11月8日 06:13