3回答

好帮手慕星星

2019-07-12

已采纳

同学你好，如果是放在App.vue中，确实是有这种问题，在每个页面中都会存在的，之不过是显示层级的问题。

如果tabbar设置的显示层级1000，那么product页面设置显示就可以为1200，然后写一个product页面中底部的tabbar，定位在底部即可。

自己试一试。

0

hC陈十一

h 原来如此，谢谢老师！！！

h019-07-12

共1条回复

CC陈十一

提问者

2019-07-12

product的
<template>
<div class='product'>
    <header class='g-header-container'>
      <home-header></home-header>  
    </header>
    <me-scroll  ref='scroll'>
        <home-slider ref='slider' @getsliders='getdata'></home-slider>
        <me-information :idata='data' @loaded='updataScroll'></me-information>
    </me-scroll>
</div>
</template>
<script>
 import {getProductDetail} from 'api/product'
 import HomeSlider from './slider'
 import HomeHeader from './herder'
 import MeScroll from 'base/scroll';
 import MeInformation from './imformation';

  export default{
    name: 'produect',
    components:{
      HomeHeader,
      HomeSlider,
      MeScroll,
      MeInformation
    },
    data(){
      return{
        data:[]
      }
    },
    created(){
      getProductDetail(this.$route.params.id);
    },
    methods:{
      getdata(datas){
        this.data=datas;
      },
      updataScroll(){
        this.$refs.scroll.update();
      }
    }
  };
</script>
<style scoped>

 @import "~assets/scss/mixins";
 .product {
    height:617px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: $product-z-index;
    width: 100%;
    background-color: $bgc-theme;
  }
</style>

tabbar组件的

<template>
<div class='g-tabbar'>
<router-link class="g-tabbar-item" to='/home'>
<i class="iconfont icon-home"></i>
<span>首页</span>
</router-link>
<router-link class="g-tabbar-item" to='/category'>
<i class="iconfont icon-category"></i>
<span>分类</span>
</router-link>
<router-link class="g-tabbar-item" to='/cart'>
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</router-link>
<router-link class="g-tabbar-item" to='/personal'>
<i class="iconfont icon-personal"></i>
<span>个人中心</span>
</router-link>
</div>
</template>
<script>
  export default{
    name: 'CTabbar'
  };
</script>
<style scoped>
@import '~assets/scss/mixins';
.router-link-active{
color:$link-active-color;
}
</style>

app.vue的

<template>
  <div id="app" class='g-container'>
   <div class="g-view-container">
   	<router-view></router-view>
   </div>
   <div class="g-footer-container">
   	<CTabbar/>
   </div>
  </div>

</template>

<script>
  import CTabbar from 'components/tabbar';

  export default {
    name: 'App',
    components: {
      CTabbar
    }
  };
</script>

0

好帮手慕星星

2019-07-12

同学你好，如果不引入底部组件的话是不会显示的哦。

建议将product页面的代码粘贴上来，老师看一下问题。

祝学习愉快！

0

hC陈十一

h 我也没引入啊，就直接放在app。vue里了，然后所有的页面就都有了，随便创一个页面都会有。但是search页面没有

h019-07-12

共1条回复