老是帮忙看下,为什么我这里购物车的滚动条里的内容可以往下拉出这么多?
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.
27
收起
正在回答 回答被采纳积分+1
3回答
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星