老是帮忙看下，为什么我这里购物车的滚动条里的内容可以往下拉出这么多？

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。

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

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

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

Raznov 2020-03-16

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

收起

3回答

提问者 Raznov 2020-03-17 16:34:30

已经找到滚动条拉到底，图片还能往上拉的原因，是因为根标签的高度被子元素撑开了，

给根标签加上 height=100% ，这样它的高度就算由父组件的 <div class="g-view-container">标签决定，再也不会可以继续往上拉，控制台也不会报错了。

收起回答

慕课网的粉 2020-03-17 10:58:30

拉到最底，还可以往上拉，是正常的，你这个报错应该是fastclick的问题，你可以在app.vue里添加下方样式

*{
    touch-action:none
  }

收起回答

提问者 Raznov #1

我已经找到滚动拉到最底，图片还可以往上拉的原因，给cart/index.vue中的根标签添加 height=100%就可以解决，报错也顺带不弹出来了

2020-03-17 16:26:29

提问者 Raznov 2020-03-16 21:13:16

对了，在index.vue文件中的

mounted () {
    this.$refs.scroll.updateScrollBar()
  }

要改成

mounted () {
    this.$refs.scroll.update()
 }

因为我的scroll组件略微修改了一点。

我把我写的这个购物车组件放进从慕课网下载的源文件中运行，也是有同样的问题。

收起回答

相似问题

老师，请帮我看一下，就是加入购物车后就出错了

老师帮我看下为什么我的购物车下拉层会被轮播图挡住，应该如何修改

老师，为什么这里点击清空购物车之后，再点击添加商品到购物车时，购物车信息会自动的显示出来啊

老师，点击添加购物车这块有点懵

关于购物车和商品快照

登录后可查看更多问答，登录/注册

4.Vue与React高级框架开发

参与学习人
提交作业 239 份
解答问题 10739 个

本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle

了解课程

本课精华内容

问答作业

老师，这是关于stylus版本和style语法高亮问题解决（可以编辑器自动缩进）如可可行可以置顶，谢谢

115 1

老师,创建VUE环境花了一天时间，创建流程供同学们参考（window）如果方法可行可以置顶，谢谢

152 1

麻烦老师看看这个写法和注释可以吗?如果可以可以置顶一下参考,谢谢

84 1

请检查是否正确

95 1

transition问题-续

65 3

查看更多本课问答

请稍等 ...