老师做完了麻烦看看   有几个问题

1、滚动条设置更新后还是无法滚动 

2、父子组件传值得时候得到的值总是空的

这是首页

<template>
 <transition name="product" appear>
   <div class="product">
     <header class="g-header-container">
       <product-header></product-header>
     </header>
     <me-scroll ref="scroll" :data="sliders">
       <product-slider @loaded="getSliders"></product-slider>
       <product-price></product-price>
       <product-evaluate></product-evaluate>
       <product-shop></product-shop>
     </me-scroll>
     <footer class="g-footer-container">
       <product-footer></product-footer>
     </footer>
   </div>
 </transition>
</template>

<script>
 import ProductHeader from './header'  // 引入头部组件
 import ProductSlider from './slider'  // 引入幻灯片组件
 import ProductPrice from './price'    // 引入价格组件
 import ProductShop from './shop'  // 引入店铺组件
 import ProductFooter from './footer'  // 引入底部组件
 import ProductEvaluate from './evaluate' // 引入评价组件
 import MeScroll from 'base/scroll'  // 引入滚动条组件

 export default {
   name: 'Product',
   components: {
     MeScroll,         // 滚动条组件
     ProductEvaluate, // 评论组件
     ProductFooter,  // 底部组件
     ProductHeader,  // 头部组件
     ProductSlider,  // 幻灯片组件
     ProductPrice,   // 价格组件
     ProductShop,    // 店铺组件
   },
   data() {
     return {
       sliders: []
     };
   },
   created() {
     console.log(this.sliders)
   },
   methods: {
     getSliders(sliders) {
       this.sliders = sliders;
     }
   }
 }

</script>

<style lang="scss" scoped>
 .product {
   overflow: hidden;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1200;
   width: 100%;
   height: 100%;
   background-color: #f5f5f5;
 }

 .product-enter-active,
 .product-leave-active {
   transition: all .3s;
 }

 .product-leave-to,
 .product-enter {
   transform: translate(100%, 0);
 }
</style>

这是幻灯片

<template>
 <div class="slider-wrapper">
   <me-loading v-if="!sliders.length"></me-loading>
   <me-slider
     :direction="direction"
     :loop="loop"
     :interval="interval"
     :pagination="pagination"
     :data="sliders"
   >
     <swiper-slide v-for="(item,index) in sliders" :key="index">
       <img :src="item" class="slider-img">
     </swiper-slide>
   </me-slider>
 </div>
</template>

<script>
 import MeSlider from 'base/slider' // 引入幻灯片基础组件
 import {swiperSlide} from 'vue-awesome-swiper'
 import {getProductDedail} from '../../api/product'
 import MeLoading from 'base/loading'  // 引入loading组件

 export default {
   name: 'ProductSlider',
   components: {
     MeSlider,
     swiperSlide,
     MeLoading
   },
   data() {
     return {
       direction: 'horizontal', // 水平滑动
       loop: true, // 无缝滚动
       interval: 3000, // 自动播放
       pagination: true, // 分页器
       sliders: []
     };
   },
   created() {
     return getProductDedail(this.$route.params.id).then(data => {
       this.sliders = data.item.images;
       this.$emit('loaded',this.sliders)
     })
   },
 }
</script>

<style lang="scss" scoped>
 .slider-wrapper {
   height: 320px;
   padding-top: 50px;
 }

 .slider-link {
   display: block;
 }

 .slider-link,
 .slider-img {
   width: 100%;
   height: 100%;
 }

</style>

这是价格

<template>
 <div class="price" v-if="apiStack.item">
   <p class="price-info">
     <span class="price-price">￥<strong>{{apiStack.price.price.priceText}}</strong></span>
     <span class="price-count">{{apiStack.vertical.jhs.soldCount}}件已售</span>
   </p>
   <p class="price-title">{{apiStack.item.title}}</p>
   <p class="price-subtitle">
     <span class="price-subtitle-left">快递包邮</span>
     <span class="price-subtitle-center">月销量{{apiStack.item.sellCount}}件</span>
     <span class="price-subtitle-right">广州</span>
   </p>
 </div>
</template>

<script>
 import {getProductDedail} from "api/product";

 export default {
   name: "ProductPrice",
   data() {
     return {
       apiStack: {},
     };
   },
   created() {
     getProductDedail(this.$route.params.id).then(data => {
       const apiStack = JSON.parse(data.apiStack[0].value);
       this.apiStack = apiStack;
     })
   }
 }
</script>

<style scoped>
 .price {
   height: 110px;
   background-color: #fff;
 }

 .price-info {
   height: 45px;
   line-height: 45px;
   background-color: #ef356b;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
 }

 .price-price {
   font-size: 16px;
   padding-left: 5px;
 }

 .price-count {
   display: block;
   width: 82px;
   height: 26px;
   line-height: 26px;
   text-align: center;
   margin-right: 5px;
   background-color: rgba(204, 46, 65, .4);
   border-radius: 5px;
 }

 .price-title {
   color: #051b28;
   padding: 10px 10px;
   border-bottom: 1px solid #f5f5f5;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .price-subtitle {
   color: #999999;
   font-size: 12px;
   margin: 10px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .price-subtitle .price-subtitle-left {
   padding-left: 10px;
 }

 .price-subtitle .price-subtitle-right {
   padding-right: 10px;
 }
</style>

这是评价

<template>
 <div class="evaluate" v-if="data.item">
   <h4 class="evaluate-title">商品评价 ({{data.item.commentCount}})</h4>
   <ul class="evaluate-list">
     <li class="evaluate-item" v-for="(item,index) in evaluates" :key="index">
       {{item.word}} ({{item.count}})
     </li>
   </ul>
   <p class="evaluate-people">
     <img :src="data.rate.rateList[0].headPic" class="evaluate-people-pic">
     <span class="evaluate-people-name">{{data.rate.rateList[0].userName}}</span>
   </p>
   <p class="evaluate-text">{{data.rate.rateList[0].content}}</p>
   <p class="evaluate-datatime">{{data.rate.rateList[0].dateTime}}</p>
 </div>
</template>

<script>
 import {getProductDedail} from "api/product";

 export default {
   name: "ProductEvaluate",
   data() {
     return {
       evaluates: [],
       data: {}
     };
   },
   created() {
     getProductDedail(this.$route.params.id).then(data => {
       if (data) {
         this.data = data;
         this.evaluates = data.rate.keywords
       }
     })
   }
 }
</script>

<style scoped>
 .evaluate {
   padding-left: 10px;
   padding-top: 2px;
   background-color: #fff;
   margin: 10px 0;
 }

 .evaluate-title {
   height: 34px;
   line-height: 34px;
   font-size: 14px;
 }

 .evaluate-list {
   display: flex;
   flex-wrap: wrap;
 }

 .evaluate-item {
   padding: 8px;
   background-color: #ffeeee;
   border-radius: 4px;
   margin: 0 10px 10px 0;
   color: #686868;
 }

 .evaluate-people {
   margin: 15px 0;
 }

 .evaluate-people-pic {
   width: 20px;
   height: 20px;
   border-radius: 50%;
 }

 .evaluate-people-name {
   line-height: 20px;
 }

 .evaluate-text {
   margin-bottom: 15px;
 }

 .evaluate-datatime {
   padding-bottom: 15px;
 }
</style>

这是店铺

<template>
 <div class="shop" v-if="data.evaluates">
   <p class="shop-shop">
     <img :src="data.shopIcon" class="shop-icon">
     <i class="shop-name">{{data.shopName}}</i>
     <i class="shop-text">天猫</i>
   </p>
   <p class="shop-evaluate">
     <span class="shop-evaluate-left shop-evaluate-fl">{{data.evaluates[0].title}} {{data.evaluates[0].score}}</span>
     <span class="shop-evaluate-center shop-evaluate-fl">{{data.evaluates[1].title}} {{data.evaluates[1].score}}</span>
     <span class="shop-evaluate-right shop-evaluate-fl">{{data.evaluates[2].title}} {{data.evaluates[2].score}}</span>
   </p>
 </div>
</template>

<script>
 import {getProductDedail} from "api/product";

 export default {
   name: "ProductShop",
   data() {
     return {
       data: {}
     }
   },
   created() {
     getProductDedail(this.$route.params.id).then(data => {
       if (data) {
         this.data = data.seller;
       }
     })
   }
 }
</script>

<style scoped>
 .shop {
   padding-left: 10px;
   padding-top: 10px;
   background-color: #fff;
   margin: 10px 0;
 }

 .shop-shop {
   position: relative;
 }

 .shop-icon {
   width: 40px;
   height: 40px;
 }

 .shop-name {
   /*line-height: 40px;*/
   padding-left: 3px;
   position: absolute;
   top: 8px;
   left: 45px;
 }

 .shop-text {
   display: inline-block;
   background-color: #ff002d;
   color: #fff;
   width: 30px;
   height: 10px;
   line-height: 10px;
   border-radius: 25px;
   text-align: center;
   font-size: 5px;
   position: absolute;
   bottom: 5px;
   left: 45px;
 }

 .shop-evaluate {
   padding: 20px 0;
   display: flex;
 }

 .shop-evaluate-fl {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
</style>

这是底部

<template>
 <div class="footer">
   <a class="footer-item">
     <i class="iconfont icon-shop"></i>
     <span>首页</span>
   </a>
   <a class="footer-item">
     <i class="iconfont icon-service"></i>
     <span>客服</span>
   </a>
   <a class="footer-item">
     <i class="iconfont icon-collect"></i>
     <span>收藏</span>
   </a>
   <a class="footer-shop footer-fl">加入购物车</a>
   <a class="footer-buy footer-fl">马上抢</a>
 </div>
</template>

<script>
 export default {
   name: "ProductFooter"
 }
</script>

<style scoped>
 .footer {
   height: 50px;
   background-color: #fff;
   display: flex;
 }

 .footer-item {
   width: 15%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 .footer-shop {
   background-color: #ff9500;
 }

 .footer-buy {
   background-color: #ff0036;
 }

 .footer-fl {
   flex: 1;
   justify-content: center;
   display: flex;
   align-items: center;
   color: #fff;
 }
</style>

这是头部

<template>
 <me-navbar title="商品详情">
   <i class="iconfont icon-back" slot="left" @click="goBack"></i>
   <i class="iconfont icon-msg" slot="right"></i>
 </me-navbar>
</template>

<script>
import MeNavbar from 'base/navbar'

export default {
 name: 'ProductHeader',
 components: {
   MeNavbar
 },
 methods: {
   goBack() {
     this.$router.back();
   }
 }
}
</script>

<style lang="scss" scoped>
 div.mine-navbar {
   background-color: #de181b;
 }

 /deep/ .mine-navbar-text {
   color: #fff;
 }

 .iconfont {
   color: #fff;
   font-size: 24px;
 }
</style>