VUE 笔记 ilovecoding 185 详情页-加入滚动的效果Scroll

内容来自 B站 ilovecoding 《最全最新Vue、Vuejs教程，从入门到精通》

Detail.vue 中引入 Scroll

<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"/>
    <scroll ref="scroll" class="detail-scroll-content">
      <detail-swiper :top-images="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
    </scroll>
  </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar'
  import DetailSwiper from './childComps/DetailSwiper'
  import DetailBaseInfo from './childComps/DetailBaseInfo'
  import DetailShopInfo from './childComps/DetailShopInfo'

  import Scroll from 'components/common/scroll/Scroll'

  import {getDetail, Goods, Shop} from 'network/detail'

  export default {
    name: 'Detail',
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll
    },
    data() {
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {}
      }
    },
    created() {
      // 1. 保存传入的iid
      this.iid = this.$route.params.iid
      // 2. 根据iid请求详情数据
      getDetail(this.iid).then(res => {
        const data = res.result
        // 1. 获取顶部的图片轮播数据
        this.topImages = data.itemInfo.topImages
        // 2. 获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        // 3. 创建店铺信息的对象
        this.shop = new Shop(data.shopInfo)
        // 初始化scroll
        this.$nextTick(() => {
          this.$refs.scroll.createScroll()
        })
      })
    }
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .detail-scroll-content {
    height: calc(100% - 44px);
  }
</style>

注：要先确保数据加载完后再初始化Scroll组件，否则不能滚动。