cart文件夹里有3个文件，分别是：

cart/index.vue

<template>
  <div class="cart">
    <!-- 购物车标题 -->
    <header class="g-header-container">
      <cart-header />
    </header>

    <!-- 购物车商品列表 -->
    <me-scroll
      scrollbar
      ref="scroll"
      class="g-content-container"
    >
      <img
        src="./cart.png"
        alt="购物车列表"
        class="cart-list"
      />
      <!-- 滚动条拉到最底时，图片还会继续上拉，同时控制台提示错误：[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
      不知道是什么原因，也找不到解决办法 -->
    </me-scroll>

  </div>
</template>

<script>
import CartHeader from './header'
import MeScroll from 'base/scroll'

export default {
  name: 'cart',
  components: {
    CartHeader,
    MeScroll
  },
  mounted () {
    this.$refs.scroll.updateScrollBar()
  }
}
</script>

<style scoped>
  @import "~assets/scss/mixins";
  .g-content-container {
    position: static;
    padding-top: $navbar-height;
    .cart-list {
      width: 100%;
    }
  }
</style>

    cart/header.vue

<template>
  <me-navbar class="header" title="购物车">
    <!-- 右侧消息图标 -->
    <i slot="right" class="iconfont icon-msg"></i>
  </me-navbar>
</template>

<script>
import MeNavbar from 'base/navbar'
export default {
  name: 'CartHeader',
  components: {
    MeNavbar
  }
}
</script>

<style scoped>
  @import "~assets/scss/mixins";
  .header {

    &.mine-navbar {
      background-color: $header-bgc-translucent;
      // background-color: transparent;
      transition: background-color 0.5s;

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

    .iconfont {
      color: $icon-color-default;
      font-size: $icon-font-size;
    }
  }

</style>

cart/cart.png，就是作业素材里的cart.png。

我做出来后效果图如下图所示，            

滚动条里的内容拉走后，下面还留着好多空白，也能拉上去，而且控制台报出了这个错误。

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.